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中，父元素就被撑开（详细解释见IE6下position定位子元素溢出，父元素被撑开的解决思路 ）
如图：


解决：在父元素（设有宽高的父元素）中加入：*overflow:hidden;(overflow:hidden在IE6是不能将子元素的溢出元素隐藏的，但是却可以防止父元素被子元素撑开)
如图：