HTML: IE: Rechtes Auffüllen im Eingabetextfeld

Gehen http://jsfiddle.net/srLQH/ und füllen Sie das input-text-Feld in das "Ergebnis" anzeigen.

Wenn Sie dies tun, in FF, Chrome und Safari, wird der text stop 20px kurz von der rechten Seite.

Im IE 7/8, den text nicht zu stoppen 20px kurz-es geht den ganzen Weg an den Rand der Eingabe-box.

Was ist der deal mit dem IE? Wie bekomme ich die gleiche Polsterung-Effekt im IE, alle anderen Browser geben Sie mir?

InformationsquelleAutor der Frage SnickersAreMyFave | 2010-09-22

  1. 7

    Habe ich nach einer Möglichkeit gesucht dieses zu lösen. Ein Kollege fand eine Lösung und wir haben es getestet und es funktioniert perfekt. Also die Sache ist das entfernen der padding: right und fügen Sie eine border: 20px solid transparent.

    InformationsquelleAutor der Antwort Monica

  2. 5

    Habe ich gefunden, einen Weg, es zu tun, aber es ist nicht schön.

    http://jsfiddle.net/dmitrytorba/dZyzr/162/

    <!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>​

    InformationsquelleAutor der Antwort Dmitry Torba

  3. 3

    Ich weiß, diese Frage ist alt, aber nach viel suchen fand ich eine Lösung, die funktioniert.

    Können Sie die "Polsterung" zurück zum IE durch das hinzufügen von Seitenrändern auf den Wert mithilfe der folgenden.

    Standard-Polsterung

     
 input[type="text"]{ 
 padding-left:17px; 
 padding-right:17px; 
 }

    Polsterung für IE-Eingänge

     
 input[type="text"]::-ms-Wert { 
 margin-left:17px; 
 margin-right:17px; 
 }

    aber dann müssen Sie entfernen die Polsterung für den IE 10+ (es muss also nicht beide verwenden), die Sie tun können, mit dieser media query. 

     
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
 input[type="text"] { 
 padding-left:0; 
 padding-right:0; 
 } 
 }

    InformationsquelleAutor der Antwort ajmccallum

  4. 2

    Scheint es, als ob IE ist Anwendung der CSS, nur eben nicht bis zum Ende der Zeile. Das heißt, die Polsterung wird beeinflusst durch den Wert, nicht den Wert beeinflusst durch die Polsterung.

    Wenn die Einstellung der padding auf 20px, den ganzen Weg um mit einem Standard-Wert länger als die Spaltenbreite, können Sie einen Bildlauf bis zum Ende und sehen Sie die Polsterung. http://jsfiddle.net/dZyzr/

    Du gehst zu haben, um sich mit einigen visuellen trick, oder einfach nur verwenden Sie ein anderes style-sheet für den IE.

    InformationsquelleAutor der Antwort Robert

  5. 2

    Nur chuck es in ein anderes element, das nicht zu tun padding im IE, wie ein div. Dann brauchen Sie nicht zu sorgen über hässliche hacks ungültig zu Ihrem css-stylesheet. Denken Sie daran, um entfernen der Polsterung aus dem Eingang, damit Sie nicht ärgern mit anderen Browsern. Dies ist auch der einzige Weg, um eine text-box ein hintergrund Bild, das nicht scrollen und den text im IE.

    InformationsquelleAutor der Antwort Randy the Dev

  6. 2

    Dies ist eine ältere Frage, aber ich fest das im IE10 durch die folgende:

    Wie man dieses Problem beheben es Für den IE-10 :

    ::-ms-clear {
  display: none;
}

    Oder für einen bestimmten input :

    .anyinput::-ms-clear {
    display: none;
}

    Weitere Informationen finden Sie hier:
    http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html

    InformationsquelleAutor der Antwort Chewpers

  7. -1

    Versuchen, diese ie-hacks

    input{
 padding-right : 20px /* all browsers, of course */  
 padding-right : 20px\9; /* IE8 and below */  
 *padding-right : 20px; /* IE7 and below */  
 _padding-right : 20px; /* IE6 */  
}

    demo

    http://jsfiddle.net/srLQH/2/

    Tipps

    Polsterung funktionieren nicht gut mit html-Formular-element, ie input, textarea, wie
    versuchen Sie es zu Marge

    input{
 margin-right : 20px /* all browsers, of course */  
 margin-right : 20px\9; /* IE8 and below */  
 *margin-right : 20px; /* IE7 and below */  
 _margin-right : 20px; /* IE6 */  
}

    da in jsfiddle , Sie haben einzelne element, warum versuchst du nicht

    margin-left statt margin-right

    InformationsquelleAutor der Antwort Pramendra Gupta

  8. -1

    Können Sie css-Eigenschaft text-indent für dieses element:

    Für Beispiel:

    <input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />

    InformationsquelleAutor der Antwort Brotheryura

Schreibe einen Kommentar