IE6条件下的bug与常见的bug及其解决方法
1、IE6条件下有双倍的margin
解决办法:给这个浮动元素增加display:inline属性
2、 图片底部有3像素问题
解决办法:display:block;或者vertical-align:middle;
3、在IE6下,用空div清楚浮动时,div标签会有默认的高度。即:
.clear{clear: both;}
<div class="clear"></div>
解决办法:.clear{clear: both;overflow: hidden;height: 0;}
3、IE6下最小高度问题
在IE6下面,如果想给把元素例如div设置成19像素左右以下的高度设置不了。这是因为IE6浏览器里面有个默认的高度
iE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden font-size:0;
4、图片在IE6及以下有边框
解决:给img{border:0 none}
5、在IE6及以下版本,部分块级元素拥有默认高度
解决:设置font-size:0
6、表单元素行高不一样
解决:input{float:left}
7、透明属性
兼容其他浏览器写法:opacity:value;(value的取值范围0-1;
例:opacity:0.5;
)
IE浏览器写法:filter:alpha(opacity=value);取值范围 0-100(整数
)
8、margin塌陷
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情
况下,设置margin-top后,会错误的把margin-top加在父级元素上,
解决:
(1)给父级元素添加overflow:hidden;(推荐使用)
(2)给父元素设置border
(3)给父元素或者子元素设置float
9、margin合并BUG
当两个上下排列的元素,上元素有margin-bottom:30px;下面元素有
margin-top:20px;他们中间的距离不会叠加,而是会设置为较大的值
解决:给两个元素或者其中一个加上display:inline-block