дисплей: встроенный блок и текстовый отступ - PullRequest
Новая
       10

дисплей: встроенный блок и текстовый отступ

6 голосов
/ 05 марта 2010

У меня возникла проблема со следующим кодом в некоторых версиях Internet Explorer: 

#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>

В Firefox, IE7 и IE8 под Vista, я вижу фон, а текста нет, как и ожидалось.В IE6 и IE8 под XP изображение целиком с отступом, а не текст, поэтому изображение не отображается.

Каким должно быть правильное поведение?Есть ли обходной путь?

Ответы [ 3 ]

5 голосов
/ 02 октября 2011

возможно, вы можете попробовать вот так: 

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

см. Демоверсию http://jsfiddle.net/zhiyelee/4aRZa/

2 голосов
/ 05 марта 2010

предположительно Internet Explorer не поддерживает display: inline-block; в версиях ниже 7 и только частично в 7. Почему не используется display:block;?

1 голос
/ 18 марта 2010 
* 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 */
...