蓝狮官网text-indent在ie7、ie6下偏移bug解决方案

在切图网一个客户项目中,发现一个问题,就是当给p标签或者其他定义text-indent属性的时候(段落自动缩进2个字符),在ie7下整个段落都发生了偏移。这是个典型的bug,蓝狮注册登陆主要还是因为ie7,ie7等低版本浏览器对display:inline-block属性不支持的原因导致的,于是搜索得到下面的解决方案,经过项目测试完美解决这个问题。

(以下摘自互联网)

text-indent一般用来实现文字缩进,不过更多的时候是用来实现文字隐藏。发现在IE6/IE7中,text-indent会导致inline- block元素出现向左(text-indent的值为负时)或向右(text-indent值为正时)的偏移。
inline-block元素设置text-indent在IE6/IE7中不正常,在IE8中正常。造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block, 蓝狮官网而是通过设置display:inline-block触发了IE的layout, 从而使内联元素拥有了inline-block属性的表症。
解决方法:

.element {display:inline-block !important; display:block;}

因为ie6/ie7不支持 important 属性,所以在 ie6/ie7 下元素会显示为一个 block 级元素,而在支持 important 的浏览器(firefox, safari)下元素将显示为一个 inline-block 级元素。

切图网(www.qietu.com)是国内首家致力于web前端开发服务的公司,提供高品质的网页切图,psd转html5,响应式网站切图,手机webapp切图,仿站等。

0 Comments
Leave a Reply