当前位置: 爱符号 - 所有分类 - Web开发 - html - display:inline-block在IE6和IE7里让你无语?
display:inline-block在IE6和IE7里让你无语? display:inline-blockZaiIE6HeIE7LiRangNiWuYu?
符号空间 发表于:2013-04-27 10:11:34 阅读(5311)
关键词:ie6 ie6 ie7 ie7 html html 兼容性 兼容性 inline inline block block
摘要:设计网页的你,想让li显示在一行吗?是否因为ie6和ie7头疼过?

有的时候做菜单,或者是做一个导航,想让li显示在一行,实现方式多种多样。

1.有直接float:left的,很听话,直接就到一行了,所有的默认独行、margin、padding,在float的霸权下全失效;

2.也有人不想那样直接飘到左边或右边,因为默认的margin padding不见了,所以用了inline或者inline-block


display  显示方式

block:块,网页中的元素有软的也有硬的,也有半硬的。

      什么意思?像span很软,软到一旦显示不下就挤换行了,而且软到两个span是紧挨着的;

      也有一直硬着的,像DIV,出现一个必然导致换成新的行。

inline:同行,它会和前面的元素保持良好的关系,在自己能与前面的同处一行时,绝对不换行,除非真的是给的宽让它呆不下去了。但也仅仅是显示在一行,元素原来是软的还是软的,

      是硬的还是硬的。

inline-block;这个是block和inline的结合,但是不是所有的浏览器都支持,IE6和IE7这两个怪胎不完全支持,有的元素好用,有的元素和元素本身的特性有冲突

none:这个不用详细说了吧,玩css的没有几个人不用它,隐藏掉了,其实准备的说法应该是不显示了,直接不处理它,连 坐标都没有,

      跟visible不一样,那只是不显示,这个是真的啥也不处理,至少标准上是这个意思,每个浏览器内核实现上会有一些差异。


介绍了display后,现在IE6和IE7这两个怪胎就出问题了

1.li天生是独占一行,因为就是line(行)的意思,所以它很顽强,很犟,所以不理采inline-block

2.部分元素inline-block是可以用的。


所以解决的问题,就是让ie6和ie7清醒一下,这两兄弟有时候会走神。


废话少说,就是在你需要设置li为inline-block的CSS里面加一句:*display:inline;zoom:1;

注意一定是一个样式的末尾,比如#abc { display:inline-block;margin:3px;/*兼容IE6/7*/ *display:inline;zoom:1;}

原因:因为zoom是唤醒IE6/7的haslayout,用后面的行为覆盖前面的行为。

如果反过来写 #abc{ /*兼容IE6/7*/ *display:inline;display:inline-block;margin:3px;zoom:1;} 会完全没有效果。


好了这下,标准浏览器、IE6、IE7都显示正常了。

怎么样,遇到这两个怪胎,你hold住了吗?



声明:以上内容仅代表作者观点,不代表爱符号赞成此内容或立场