当INLINE-BLOCK和TEXT-INDENT遇到IE6,IE7
| 代码如下 | 复制代码 |
|
#iconautente{ php教程">admin |
|
在做一个按钮时,由于按钮的文字的艺术感太强直接跟背景一起切片,但是处于SEO考虑还是在a标签内添加了相应的文字,
常规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如下:
给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的表现，代码如下：
| 代码如下 | 复制代码 |
|
|
|
