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
例如:
2、块元素中含有图片时,ie6-7中会出现图片下有空隙
解决办法:将图片转换为块级对象display:block;(多种方法见博客)
3、当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。
解决办法:我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug,参考[url]http://www.niumowang.org/html-css/ie6-overflow-hidden-invalid/[/url]
如图:
此图是由于子元素设置了position:relative,父元素的overflow:hidden不起作用
[img]http://dl.iteye.com/upload/attachment/0082/6414/542da106-2d95-3e85-ab41-5480553b6440.jpg[/img]
解决:给父元素设定宽度,并设置position:relative;如图:
[img]http://dl.iteye.com/upload/attachment/0082/6418/75cbcf91-4e8d-3c03-b091-b5c79d3581f3.jpg[/img]
4、li中如果一行中放不下一个li的内容,内容就会竖向排列,如图:
[img]http://dl.iteye.com/upload/attachment/0082/6420/bf1e7122-2921-313f-8e1a-e2eddf1ab3f5.jpg[/img]
解决:在li的父级元素ul中加入white-space:nowrap;如图:
[img]http://dl.iteye.com/upload/attachment/0082/6422/629b092b-fbcc-3143-af6a-2d720937d9e7.jpg[/img]
5、我们想让一个子元素溢出其父元素之外显示,当子元素设置position:relative,并且宽度大于父元素的宽度时,IE6中,父元素就被撑开(详细解释见[url=http://liuyt611.iteye.com/admin/blogs/1841906]IE6下position定位子元素溢出,父元素被撑开的解决思路[/url] )
如图:
[img]http://dl.iteye.com/upload/attachment/0082/6428/ea308dc7-f2d4-3e3b-84ec-b1861060fd2a.jpg[/img]
解决:在父元素(设有宽高的父元素)中加入:*overflow:hidden;(overflow:hidden在IE6是不能将子元素的溢出元素隐藏的,但是却可以防止父元素被子元素撑开)
如图:
[img]http://dl.iteye.com/upload/attachment/0082/6431/bb2ec70a-4c04-302b-b1a7-7917c67f1d11.jpg[/img]
以向左漂浮为例,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,参考[url]http://www.niumowang.org/html-css/ie6-overflow-hidden-invalid/[/url]
如图:
此图是由于子元素设置了position:relative,父元素的overflow:hidden不起作用
[img]http://dl.iteye.com/upload/attachment/0082/6414/542da106-2d95-3e85-ab41-5480553b6440.jpg[/img]
解决:给父元素设定宽度,并设置position:relative;如图:
[img]http://dl.iteye.com/upload/attachment/0082/6418/75cbcf91-4e8d-3c03-b091-b5c79d3581f3.jpg[/img]
4、li中如果一行中放不下一个li的内容,内容就会竖向排列,如图:
[img]http://dl.iteye.com/upload/attachment/0082/6420/bf1e7122-2921-313f-8e1a-e2eddf1ab3f5.jpg[/img]
解决:在li的父级元素ul中加入white-space:nowrap;如图:
[img]http://dl.iteye.com/upload/attachment/0082/6422/629b092b-fbcc-3143-af6a-2d720937d9e7.jpg[/img]
5、我们想让一个子元素溢出其父元素之外显示,当子元素设置position:relative,并且宽度大于父元素的宽度时,IE6中,父元素就被撑开(详细解释见[url=http://liuyt611.iteye.com/admin/blogs/1841906]IE6下position定位子元素溢出,父元素被撑开的解决思路[/url] )
如图:
[img]http://dl.iteye.com/upload/attachment/0082/6428/ea308dc7-f2d4-3e3b-84ec-b1861060fd2a.jpg[/img]
解决:在父元素(设有宽高的父元素)中加入:*overflow:hidden;(overflow:hidden在IE6是不能将子元素的溢出元素隐藏的,但是却可以防止父元素被子元素撑开)
如图:
[img]http://dl.iteye.com/upload/attachment/0082/6431/bb2ec70a-4c04-302b-b1a7-7917c67f1d11.jpg[/img]