个人博客
专注IT梦想的地方

CSS中margin属性在IE6中的双倍浮动bug

当元素浮动并且定义了与浮动及书写方向一致的margin,这时,在IE6下margin值将表现为指定值的双倍,如果同一个包含块内有多个子元素浮动,那么只有和浮动方向一致元素的margin才会双倍,并且该元素是浮动方向上的第一个元素,这种情况目前在IE6中会存在,由于目前在浏览器市场IE6的市场份额还有不少,所以分享出来,也希望大家能够了解和学习。

但是能真正触发产生margin属性双倍浮动的情况只会有三种情况,分别为:

  1. block和list-item元素
  2. 定义了浮动
  3. margin定义与浮动及书写方向一致

通过试验,我们发现了 block | list-item | inline | inline-block 4种元素的情况,因为IE6都不支持。准确的说只有 block和list-item元素才能触发其实是不严谨的,应该说是 block level 都会触发。

简单说明一下几个概念吧:

  1. block level elements 块级元素
  2. inline level elements 行内级元素
  3. block elements 块元素
  4. inline elements 行内元素
  5. 块级元素包含block(块元素),list-item,table等元素
  6. 行内级元素包含inline(行内元素),inline-block,inline-table等元素

解决方案

虽然我们无法知道IE6的排版引擎在实现上为什么会有此Bug,但通过对触发条件的验证,我们知道了此问题只有block level元素才会触发,也就是说我们只需要修改display属性为非block level即可。同时,我们知道IE6只支持display属性的:none | inline | block | list-item | inline-block 5个值;而且对inline-block的支持只体现在行内元素上,行内元素不触发该Bug,于是没场景使用;你又不可能将元素隐藏,那么就只剩下inline可选。于是双倍边距Bug的最终解决方案只能是:

display:inline

 

其它

至于触发条件里的 margin定义与浮动及书写方向一致 是什么意思呢?这里只简单说一下,直接看代码比较容易:

CSS Code:

.demo{*zoom:1;overflow:hidden;background:#f00;}
.demo .item{margin:0 15px;padding:5px 10px;background:#aaa;}
.demo .item1,.demo .item2{float:left;}
.demo .item3,.demo .item4{float:right;}

HTML Code:

<div class="demo">
	<div class="item item1">子项一</div>
	<div class="item item2">子项二</div>
	<div class="item item3">子项三</div>
	<div class="item item4">子项四</div>
</div>

你会发现item1和item3 都双倍margin了,但方向却不同,item1是margin-left双倍,而item3是margin-right双倍。

这说明了什么呢?

首先说明双倍margin的方向和浮动方向有关,因为item1是左浮动,所以左边距才双倍,item3是右浮动,所以右边距才双倍;
其次,item1和item3分别是包含块demo中左浮动和右浮动中的第1个离包含块边界最近的子元素,它们的margin双倍了,但item2和item4却没有双倍,这表示说包含块中只有和浮动方向一致的第1个子元素才会触发双倍边距。

这就是IE6浮动双倍边距的全部吗?

答案当然不是,因为margin-top和margin-bottom也会双倍。

总结

所以大家在学习前端时候,需要多努力去了解每个兼容的问题,想细想深,多实践。

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » CSS中margin属性在IE6中的双倍浮动bug

评论 3

评论前必须登录!

 

  1. #0

    这跟市场份额没关系 人家都是用IE8来测试兼容的嘛 [生病]

    林丽6年前 (2014-11-17)
  2. #0

    IE6不用考虑其兼容性问题 三大兼容浏览器是IE8 火狐 还有一个忘了

    林丽6年前 (2014-11-08)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏