你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

当inline-block和text-indent遇到IE6,IE7

其他技术 练习 24940浏览 3评论

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


Button

css我习惯写成这样

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

在标准浏览器下是没问题的,但是在IE6和7下会触发A标签消失的bug。

解决方法1:

display:inline-block;

改为

display:block;

然后再做布局处理。

解决方法2:

text-indent:-9999px;

改为

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

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

解决方法3:

 Button

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

解决方法4:
给元素加 position:absolute;

PS: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,所以在布局时应加以注意…

转载请注明:练小习的前端技术笔记 » 当inline-block和text-indent遇到IE6,IE7

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (3)

  1. 有用,刚好碰到这个问题
    sam6年前 (2013-10-15)回复
  2. 感谢博主!
    小松7年前 (2012-10-17)回复
  3. 建议看下这篇文章 http://www.topcss.org/?p=418
    Jace7年前 (2012-04-09)回复