不知道朋友有没有遇到，我一用text-indent,父层就被撑破了，烦恼好久，终于找到高手的说明方法，分享给大家:text-indent一般用来实现文字缩进，不过更多的时候是用来实现文字隐藏。发现在IE6/IE7中，text-indent会导致inline-block元素出现向左(text-indent的值为负时)或向右(text-indent值为正时)的偏移。请看下面的示例：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>text-indent在IE6/IE7中的BUG</title>
<style type=”text/css”>
body{
font-size:12px;
font-family:’微软雅黑’;
}
.inline-block{
display:inline-block;
width:200px;
height:120px;
overflow:hidden;
border:1px solid orange;
}
.block{
display:block;
width:200px;
height:120px;
overflow:hidden;
border:1px solid orange;
}
</style>
</head>
<body>
<span style=”text-indent:-4em;”>
display:inline-block;
text-indent:-4em;
</span>
<hr />
<span style=”text-indent:0em;”>
display:inline-block;
text-indent:0em;
</span>
<hr />
<span style=”text-indent:4em;”>
display:inline-block;
text-indent:4em;
</span>
<hr />
<span style=”text-indent:-4em;”>
display:block;
text-indent:-4em;
</span>
<hr />
<span style=”text-indent:0em;”>
display:block;
text-indent:0em;
</span>
<hr />
<span style=”text-indent:4em;”>
display:block;
text-indent:4em;
</span>
</body>
</html>
inline-block元素设置text-indent在IE6/IE7中不正常，在IE8中正常。造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block， 而是通过设置display:inline-block触发了IE的layout， 从而使内联元素拥有了inline-block属性的表现。具体可见 display:inline-block在IE6/Ie7和IE8中的区别。所以为了兼容IE6和IE7，我们应该对块元素(block)使用text-ident属性。
本站文章欢迎转载。转载请注明：转载自迷失曾经谢谢！
原文链接地址：text-ident不兼容问题的bug分析? Tags: text-ident
