总结使用DIV+CSS布局时常见的BUG

转载yofox的做主题和修改主题又很大帮助,转载慢慢消化原文链接:http://www.yofox.net/2008/09/bug-ie-ff/

1.ul在FF中默认是有padding值的,而在IE中只有margin值.
   解决方法:ul{margin:0; padding:0;}

 

2.margin加倍的问题:
   BUG出现在IE6中,当使用margin时,会出现双倍距离,例如margin-left:5px;在IE中可能会被解析为margin-left:10px;
   解决方法:在margin-left:5px;后加上display:inline;

 

3.高度不能自适应问题:
   当包含float的box的时候,高度自动适应会无效。这时在包含的容易上加上:overflow:hidden;即可解决IE7,FF自适应。
   如果要让IE6也达到预期效果,需要在加上: { zoom:1;}或者{ height:100%;}
   解决方法:{ overflow:hidden; height:100%;} 或者 { overflow:hidden; zoom:1;}

 

4.IE中奇怪的左右border断线现象
  如果容器内有两个浮动,并用CLEAR清除浮动。在ie下拖动滚动条时最外层的border会消失,如果给最外层加上宽度或者高度就不会出现。
  3种解决方法:
  在父元素中加入height:1%;
  加入一个宽度;
  加入一个背景色.

 

5.IE下容器高度小于10px,容器高度会默认加到line-height的高度
  解决方法:font-size:0;

 

6.当<li><a herf=”#”><img src=”#”></a></li>出现时,<img>会默认有一个向下的padding值;
  解决方法:li {font-size:0;}

 

7.IE6下不兼容PNG透明背景问题.
  FF以及IE7都可以对PNG透明背景有很好的支持,但是在IE6下却不行,下面给出解决方法:
  background:url(images/footer_bg.png) no-repeat;
 *background-image: none;
 *filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=images/footer_bg.png, sizingMethod=scale);
 注意:如果遇到无效的情况,src=images/footer_bg.png改为绝对地址。

 

8.使用透明PNG背景出现链接失效
解决方法:加上position:relative;

发表评论