display:inline-block and text-indent

Question

我在一些版本的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和Vista下的IE8中，我看到了背景但没有文字，这是预期的。在XP下的IE6和IE8中，整个图像都被缩进了，而不是文字，因此图像没有显示出来。

正确的行为应该是什么？有没有解决方法？

- Daniele Cruciani

---

使用 <a ...><span>admin</span></a> 和 #iconautente span{text-indent:-9000px;} 可以工作，但是 inline-block 的 text-indent 会缩进整个块，而不仅仅是文本。标准怎么说？ - Daniele Cruciani

Answer 1

也许你可以尝试这样做：

.blk {  显示:inline-block; 高度:96像素; 宽度:96像素; 文本缩进:-9999像素; *文本缩进:0; *字体大小:0; *行高:0; *溢出:隐藏; }

查看演示：http://jsfiddle.net/zhiyelee/4aRZa/

- zhiyelee

---

就我所知，这是旧版本的MSIE中的一个错误，需要像这样的黑客才能解决。为什么要为了符合旧浏览器而妥协新标准呢？文本缩进会破坏应用尺寸的内联（inline-block）元素。在新的浏览器中，您也可以将字体大小设置为零，并获得相同的结果（无需黑客），但文本缩进是我首选的隐藏文本方法。 - Justin Bull

更正一下：字体大小在所有现代浏览器中的行为方式并不相同，因此尽可能使用text-indent，在使用IE6或7时覆盖它。另外，对于那些不知道的人：这个答案与被接受的答案相同，但使用了一个选择器hack来同时针对IE6和7。我更喜欢这种方法，因为代码更少。 - Justin Bull

Answer 2

据推测，Internet Explorer在7及以下版本中不支持display:inline-block;，而且在7版本中只部分支持。为什么不使用display:block;呢？

- Phil Rykoff

---

准确来说，如果原始的 display 属性为 inline，则只有在版本低于8的情况下才支持 inline-block。 - casraf

原始的a标签是内联的。因为使用display:block;不能正确地垂直对齐元素，而且vertical-align没有效果。 - Daniele Cruciani

Answer 3

* 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 */

- Fatih Hayrioğlu

---

我刚意识到font-size和line-height可以做到不显示文本的效果...谢谢 - Daniele Cruciani

在 Chrome 浏览器中，文本仍以非常小的字体大小显示（看起来像点迹的痕迹）。 - Halil Özgür

@HalilÖzgür 这是针对IE6/7的一个hack，可能在新版本的浏览器中会有意外的行为。我建议在现代浏览器中使用负文本缩进和溢出隐藏，而在旧版MSIE中使用这个hack。 - Justin Bull