IE6下margin双倍边距

开始工作之后任务都是要求兼容所有浏览器，之前都在IE8+版本上兼容，大概了解些IE6的bug但一直也没实际遇到过 .. 借此机会，把我遇到的所有ie bug记录下来 ～ 共勉 ！

触发条件：

• 浮动元素的浮动方向和margin的方向一致 .

  { float : right; margin-right:100px;}{ float : left; margin-left:100px;}

• 只有第一个元素会这样

解决办法

1. 给元素加display:inline

   { float : left; margin-left:-100px; display:inline}

2. 加一个hack，取值为正常值的一半

   { float : left; margin-left : -100px; margin-left : -50px;}

3. 用padding-替代margin- (结合实际布局)

---

我是在三栏布局中遇到左浮动第一栏在IE6下消失的问题，试了一会才想起来应该是margin双边距问题， 确实如此。

.left-container {    float:left;    width:350px;    margin-left:-350px;    display:inline;}.main-container {     float:left;    min-width:1350px;    padding-left:350px;    padding-right:330px;}.right-container {     float:left;    width:330px;    margin-right:-330px;}

---

原因

大大说是由于BFC特性，我再好好学习一下。

块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
关于Block Formatting Context－－BFC和IE的hasLayout
认识hasLayout——IE浏览器css bug的一大罪恶根源