开始工作之后任务都是要求兼容所有浏览器,之前都在IE8+版本上兼容,大概了解些IE6的bug但一直也没实际遇到过 .. 借此机会,把我遇到的所有ie bug记录下来 ~ 共勉 !
触发条件:
浮动元素的浮动方向和margin的方向一致 .
{ float : right; margin-right:100px;} { float : left; margin-left:100px;}
只有第一个元素会这样
解决办法
给元素加
display:inline
{ float : left; margin-left:-100px; display:inline}
加一个hack,取值为正常值的一半
{ float : left; margin-left : -100px; margin-left : -50px;}
用
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的一大罪恶根源