首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

IE6下面父div:padding,子div:float有关问题

2012-05-09 
IE6下面父div:padding,子div:float问题HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitio

IE6下面父div:padding,子div:float问题

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <title>test2</title>    </head>    <body>        <div style="float: left;border: solid 1px red; height: 75px;width: 120px;padding: 10px;">            <div style="float: left;width: 125px;height:80px;border: solid 1px green;"></div>        </div>    </body></html>

这段代码大家可以拷过去运行看看效果,在IE6下子div竟然把父div撑开了,而其他IE7+、chrome和firefox下都不会撑开的。

这算哪方面的bug,搜了好久调了半天没调出来解决方法。晕死,谁给个方法吧。

[解决办法]
360浏览器和IE8浏览器测试,都是LZ的效果。
[解决办法]
不同版本浏览器对html标签的解析是不同的,可以试下在父div里面在添加一个div标签<div style=clear:both></div>, 然后将父div的height:auto; 我是猜着写的,具体效果你可以试下不知道行不行
[解决办法]
这个bug是由其浏览器的特性决定的,像这种没名的没办法说明。一般认为,ie6会撑开布局而非ie6不会撑开布局。既然知道这个原因,加个overflow:hidden;就解决了。让他撑开的隐藏不就得了。
其实ie6下最大的bug就是haslayout,楼主有空了解一下。
HTML code
<div style="float: left;border: solid 1px red; height: 75px;width: 120px;padding: 10px;overflow:hidden;">    <div style="float: left;width: 125px;height:80px;border: solid 1px green;"></div></div> 

热点排行