当INLINE-BLOCK和TEXT-INDENT遇到IE6,IE7

作者：袖梨 2022-06-25

代码如下

复制代码

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

php教程">admin
In Firefox, IE7 and IE8 under Vista, I see background and no text, as expected. In IE6 and IE8 under XP, the whole image is indented, not text, so the image is not shown.

在做一个按钮时,由于按钮的文字的艺术感太强直接跟背景一起切片,但是处于SEO考虑还是在a标签内添加了相应的文字,

Download PDF

常规CSS如下:

代码如下	复制代码
.icon { display:inline-block; width:16px; height:16px; text-indent:-9999px; } .icon-pdf { background-image:url(pdf.png); }

嗯,在FF,Chrome IE8,XXX主流浏览器下展现得很完美,处于恶心的原因忘记在IE6,7下看了...
嗯,几天后测试跑过来说漂漂的按钮怎么在IE6,7下消失了,当时就惯性的打开浏览器并开启调试工具一通折腾,最后找到解决方案,调整下样式如下:

代码如下	复制代码
.icon { display:block; width:16px; height:16px;text-indent:-9999px } 或 .icon { display:inline-block; width:16px; height:16px; font-size:0; line-height:0; }

或者修改你的html如下:

Download PDF

给a标签前加上等等等方法...
inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素，也就出现了上文中的结果。
造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。
考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意...

代码如下

复制代码

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

考察各浏览器对inline-block的支持情况，结果如下：

IE6、7及兼容模式下的IE8不完全支持。只对默认具有inline布局的元素有效
IE8、FF、Safari、Chrome、Opera支持

这样看来，前面给出的代码应能很好地支行在目前主流的浏览器上。但测试结果显示：在IE6、7及兼容模式下的IE8中，按钮所在的位置空白一片，但可以看出它已经占据了页面上的某一位置。

问题出在text-indent上，测试结果显示：

text-indent为负时，元素向左偏移
text-indent为正时，元素向右偏移
在这种情况下，元素的偏移量由text-indent和margin值决定，如：margin-left::-10px; text-indent:10px相当于margin-left:0; text-indent:0元素没有偏移，那么解决之道是？

简单的解决方案是不要在IE6、7下使用inline-block，比如这样设置display:inline-block !important; display:block;，IE6、7不认识!important。这样IE6、7下会渲染成一个块级元素，而其他浏览器则显示为inline-block元素。

这次问题是出在inline-block和text-indent相遇了，那么这样的问题是否会出现在其他元素上呢？考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block。那么简单地考察下button的表现，代码如下：

代码如下

复制代码