IE6,IE7下inline-block&text-indent的问题

2013-11-13阅读(4599)评论(0)牵着狗狗看MM

W3Cways.com 微信公众号

在实际应用中,考虑seo的情况下,很多button,icon都要用到inline-block和text-indent来处理
例如:

<a href="#" class="btn">Button</a>

CSS:

.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}

如果这样写的话,在IE6&IE7下,会触发A标签会消失的BUG。

解决方法一:

display:inline-block;

改为

display:block;

然后再做布局处理

解决方法二:

text-indent:-9999px;

改为

font-size:0; line-height:0;

或者各种可以隐藏掉内容元素的方法。

解决方法三:

<a href="#" class="btn">Button</a>

在按钮前面增加任何元素,都可以让消失的按钮重新出现。

解决方法四:

给元素加 position:absolute;
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,所以在布局时应加以注意

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » IE6,IE7下inline-block&text-indent的问题
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!