ie6兼容(xun)

1、float属性对margin的影响-----双边距问题
   以向左漂浮为例,div设置float:left,若设置margin-left:10px,在IE6中会出现双倍解析问题,也就是该div距离父div左边缘的实际距离是20px,其他浏览器中则正常。注意该差异只是在父——子div中才存在,同一级的div中没有差异。
   解决方法是该子div的display:inline,可消除IE6的双倍解析问题。
   注意:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。使用display:inline方法仅限于使用float时使用,否则显示会出现问题。多个子块在父块中使用float时,同行显示的多个子块只需要第一个使用display:inline

  例如:


<div style="width:500px;height:200px;background:#0F0">
   <div style="width:100px;height:200px;float:left;margin-left:10px;background:#F00;display:inline;"></div>
   <div style="width:100px;height:200px;float:left;margin-left:10px;background:#F00;"></div>
   <div style="width:100px;height:200px;float:left;margin-left:10px;background:#F00;"></div>
   <div style="width:100px;height:200px;float:left;margin-left:10px;background:#F00;"></div>
 </div>
2、块元素中含有图片时,ie6-7中会出现图片下有空隙
  
解决办法:将图片转换为块级对象display:block;(多种方法见博客)

3、当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。
解决办法:我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug,参考
http://www.niumowang.org/html-css/ie6-overflow-hidden-invalid/


如图:
此图是由于子元素设置了position:relative,父元素的overflow:hidden不起作用

解决:给父元素设定宽度,并设置position:relative;如图:

4、li中如果一行中放不下一个li的内容,内容就会竖向排列,如图:

解决:在li的父级元素ul中加入white-space:nowrap;如图:

5、我们想让一个子元素溢出其父元素之外显示,当子元素设置position:relative,并且宽度大于父元素的宽度时,IE6中,父元素就被撑开(详细解释见http://liuyt611.iteye.com/admin/blogs/1841906]IE6下position定位子元素溢出,父元素被撑开的解决思路 )
如图:
ie6兼容(xun)_第1张图片

解决:在父元素(设有宽高的父元素)中加入:*overflow:hidden;(overflow:hidden在IE6是不能将子元素的溢出元素隐藏的,但是却可以防止父元素被子元素撑开)
如图:
ie6兼容(xun)_第2张图片

你可能感兴趣的:(ie6兼容(xun))