CSS-Problem im IE7 und IE8 - text-indent auf <input type="text"> Feld

Ist es möglich, IE7 und IE8 respektieren Sie die text-indent css-Eigenschaft in einem input-Feld?

Hier ist mein code

<!DOCTYPE html>
<html>
<body>
        <input type="text" style="text-indent:100px; display:block;" value="Test indent" />
</body>
</html>

Beim ersten laden der Seite im IE8 wird der text NICHT eingerückt. Sie können "aktivieren", die text-indent-Eigenschaft, indem der Fokus auf das Textfeld und Eingabe in es (ie. auslösen des onchange-Ereignis).

Wie mache ich IE7 und IE8 Respekt den text-indent von ein input-text-element auf der Seite zu laden, statt auf input.onchange-Ereignis?

  • warum brauchen Sie diese? Vielleicht gibt es einen anderen Weg.
  • normalerweise würde ich verwenden, padding-left oder margin-left...aber wegen etwas, was ich mache, ich ' m gehen zu müssen, verlassen sich auf text-indent
  • mit etwas, was außerhalb der Absicht ist nicht zu empfehlen. Wie @gelogenic gesagt, text-indent gemeint ist, zum Einrücken der ersten Zeile. Ein inline element (wie input) werden nicht unbedingt dies respektieren, wenn es nicht das erste Element in einem Absatz.
  • dieses Eingabefeld ist nur dazu da, um eine Zeile. Wenn ich wollte, multiline, ich würde verwendet haben textarea
  • ein input Feld ist nichts anderes als ein span in diesem Fall. <p>This is a <input type="text" value="test"/></p> ist (wahrscheinlich) eine Zeile text. "test" ist es nicht die eigene Linie, es sei denn, die input ist display: block; Eine textarea element ist ein block level element (wie ein p tag).
  • Wenn meine Antwort hilfreich ist, bitte abstimmen 🙂

InformationsquelleAutor John | 2011-05-06
  1. 13

    im normalen Fall aus input-tag text-indent funktioniert nicht in ie6 und ie7
    Wenn wir hinzufügen, lineheight:1px es funktionieren alle browser

    Text-indent arbeiten alle browser 

    <input type="text" style="text-indent:-100px; display:block; line-height:1px;" value="Test indent" />

    Text-indent nicht funktioniert ie7 und ie6 browser 

    <input type="text" style="text-indent:-100px; display:block;" value="Test indent" />

    demo

    http://jsfiddle.net/KczMR/1/

    • Es scheint, jede line-height arbeiten, so ist es besser, zu schreiben line-height: 1em;
    • Dank input bekommt der text ist hart im IE
    InformationsquelleAutor ShibinRagh
  2. 0

    Sind Sie sicher, dass Sie wollen 'text-indent', anstatt entweder die 'margin-left' oder 'padding-left' - Eigenschaft? Die 'text-indent' - Eigenschaft gemeint ist, wirken sich nur auf die erste Zeile des Textes in einem element. Haben Sie vielleicht mehr Glück mit margin oder padding.

    • normalerweise würde ich verwenden, padding-left oder margin-left...aber wegen etwas, was ich mache, ich ' m gehen zu müssen, verlassen sich auf text-indent
    InformationsquelleAutor gelogenic
Schreibe einen Kommentar