Klotzen eine Texteingabe in IE ... möglich?

StackOverflow https://stackoverflow.com/questions/607198

Frage

Ich habe eine Texteingabe mit der Suche buton absoluten darüber positionierte ..., um Platz für die Schaltfläche macht ich etwas Padding verwendet, um den Text zu halten unter der Taste los, was in Ordnung ist, es funktioniert in Firefox, aber nicht IE.

In der Tat ... Es scheint nicht, wie Polsterung auf Texteingaben funktioniert überhaupt im Internet Explorer.

Sie haben den folgenden Code 


<style type="text/css">
#mainPageSearch input {
    width: 162px;
    padding: 2px 20px 2px 2px;
    margin: 0;
    font-size: 12px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
    border-color:#C6C6C6 #C6C6C6 #E3E3E3;
    border-style:solid;
    border-width:1px;
    color:#666666;
}
#mainPageSearch {
    margin-bottom: 10px;
    position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
    display: block;
    position: absolute;
    top:0px;
    right: -2px;
    text-indent: -2000em;
    height: 22px;
    width: 22px;
    background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>


<form id="mainPageSearch" action="">
    <input type="text"/>
    <a id="mainPageSearchButton" href="#">Search</a>
</form>

Ist das, was ich versuche möglich zu tun, oder soll ich es einfach aufzuzusaugen und befassen sich mit dem Text unter der Suchtaste los?

Ich weiß, ich könnte ein Suchfeld mit einer transparenten Hintergrund / Grenze machen und das Styling mit einem enthaltenden div ziehen ... aber das ist nicht wirklich eine Option, weil, wie viele Orte, die ich habe habe es auf das uns ändern Seite? ˅.

Vielleicht werde ich eine neue Klasse für diese Texteingabe machen, dass sie transparent und weisen Sie den normalen Texteingabestil zum umgebenden div macht? Was denken Sie?

Bearbeiten : sorry, ich sollte die Doctype aufgenommen haben ... hier ist es: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Auch die Probleme, die ich habe sind in IE 7

War es hilfreich?

Lösung

versuchen Sie es mit line-height

Andere Tipps

Ich hatte dieses Problem auch gelöst ich es durch die folgende Zeile hinzufügen 

input 
{
    overflow:visible;
    padding:5px;
}

hoffe, das hilft? Lassen Sie mich wissen.

Versuchen border-right statt padding-right. Das funktionierte für mich.

Machen Sie Ihre Eingabe transparent und Ort Stile innerhalb eines Behälters div:

http://jsfiddle.net/LRWWH/211/

HTML 

 <div class="input-container">
 <input type="text" class="input-transparent" name="fullname"> 
 </div>

CSS 

 .input-container {
    background:red;
    overflow:hidden;
    height: 26px;
    margin-top:3px;        
    padding:6px 10px 0px;
    width: 200px;
  }

 .input-transparent {
    background-color:transparent;
    border:none;
    overflow:hidden;        
    color:#FFFFF;
    width: 200px;
    outline:none;
  }

Es gibt eine CSS nur für das Problem beheben 

div.search input[type="text"] {
    width: 110px;
    margin: 0;
    background-position: 0px -7px;
    text-indent:0;
    padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
    border-left: 25px solid transparent;
    background-position-x: -16px;
    padding-left: 0px;
    line-height: 2.5em;
}

Danke Mohammed Atif Chughtai

Sie müssen Schwimmer verwenden: links / rechts auf ‚#mainPageSearch Eingang‘, bevor Sie padding / margin anwenden

.

Ich erlebte ein ähnliches Problem - IE das Eingabefeld wurde Klotzen, aber nicht größer machen, damit Sie den Text nach unten drücken im Inneren. I fixiert es durch als auch um die Höhe der Eingabeeinstellung. Versuchen Sie das mal.

Ich habe folgende Arbeiten in IE7. Welche Version zielen Sie ab? 

<style type="text/css">

    input#test {
        padding: 10px;
    }

</style>


<input type="text" id="test" />

Was ist DOCTYPE erklärt?

Durch das Hinzufügen <!DOCTYPE html> Polsterung für mich in IE8 grand funktioniert. Nehmen Sie den folgenden Code als Beispiel: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myInput {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <input id="myInput" value="Some text here!" />
  </body>
</html>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top