display: inline-block und text-indent

Ich habe ein Problem mit dem folgenden Code in einigen Versionen von Internet Explorer erleben:display: inline-block und text-indent

#iconautente{ 
background-image:url('/style/images/spritecommon.png'); /*icona_utente.png*/ 
background-position:-117px -15px; 
text-indent:-9000px; 
width:20px; 
height:23px; 
display:inline-block; 
} 

<a id="iconautente" href="/admin/index.php">admin</a>

In Firefox, IE7 und IE8 unter Vista, ich sehe Hintergrund und ohne Text , wie erwartet. In IE6 und IE8 unter XP ist das gesamte Bild eingerückt, kein Text, daher wird das Bild nicht angezeigt.

Was sollte das richtige Verhalten sein? Gibt es eine Problemumgehung?

Quelle

2010-03-05 Daniele Cruciani

mit admin und #iconautente Spanne {text-indent: -9000px;} funktioniert, aber text-indent von Inline-Block Einrückung ganzer Block, nicht enthaltener Text. Was sagt der Standard? –

* html #iconautente{text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie6 hack */ 

*:first-child+html #iconautente{ text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie7 hack */

Quelle

2010-03-18 09:49:15

Ich habe gerade festgestellt, dass Schriftgröße und Zeilenhöhe den Trick machen, Text nicht anzuzeigen ... thanx –

Der Text wird immer noch in Chrome-Browser angezeigt, in einem sehr kleine Schriftgröße (es sieht aus wie eine Spur von Punkten). –

@ HalilÖzgür Dies ist als ein Hack für IE6/7 gemeint und kann unerwartete Verhaltensweisen in neueren Browsern haben. Ich würde einen negativen Text-Einzug kombiniert mit Überlauf in modernen Browsern, und diesen Hack für ältere MSIE empfehlen. –

~~vermutlich~~ Internet Explorer unterstützt nicht display: inline-block; in Versionen unter 7 und nur teilweise in 7. Warum verwenden Sie nicht display:block;?

Quelle

2010-03-05 11:55:04

Um genau zu sein, 'Inline-Block' wird nur in Versionen unter 8 unterstützt, wenn die ursprüngliche' display' -Eigenschaft 'inline' ist. – casraf

Original ein Tag ist inline. Weil mit display: block; nicht richtig vertikal ausrichten Element, und vertikal ausrichten hat keine Wirkung –

vielleicht können Sie wie folgt versuchen:

 
.blk { display:inline-block; height:96px; width:96px; text-indent:-9999px; *text-indent:0; *font-size:0; *line-height:0; *overflow:hidden; }

die Demo sehen http://jsfiddle.net/zhiyelee/4aRZa/

Quelle

2011-10-02 16:45:00 zhiyelee

Soweit es mich betrifft, ist dies ein Bug in älteren Versionen von MSIE und es erfordert einen solchen Hack zu lösen. Warum kompromittieren Sie neuere Standards für die Kompatibilität mit älteren Browsern? Texteinzug bricht Inline-Elemente (Inline-Block) mit angewendeten Dimensionen ab. Sie können die Schriftgröße auch in neueren Browsern auf null setzen und zwar mit dem gleichen Ergebnis (kein Hack erforderlich), aber Text-Einzug ist meine bevorzugte Methode zum Verbergen von Text. –

Um mich selbst zu korrigieren: Schriftgröße verhält sich nicht in allen modernen Browsern gleich, also verwenden Sie Texteinzug, wenn möglich, und überschreiben Sie es, wenn Sie IE6 oder 7 verwenden. Auch für die nicht bewusst: diese Antwort ist die gleiche wie die akzeptierte Antwort, verwendet aber einen Selektor-Hack, der sowohl auf IE6 als auch auf 7 abzielt. Ich bevorzuge diese Methode, weil es weniger Code ist. –

Antwort

Verwandte Themen