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

posted on 2018-09-19 10:20  婧星  阅读(172)  评论(0编辑  收藏  举报

导航