想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。
测试如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>各浏览器对宽高的解析测试</title>
</head>
<body>
<h1>浏览器对设定高度，没有设定宽度的解析</h1>
<div style="border:1px solid red;height:10px;">呼哈呼哈哈</div>
<p>FF,Chrome,IE7~9下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大。<br />
而IE6下是会被内容撑大，高度限定失效。</p>
<p>解决IE6下的bug,必须加上overflow:hidden。</p>
<h1>浏览器对设定宽度，没有设定高度的解析</h1>
<div style="border:1px solid red;width:10px;"></div>
<div style="border:1px solid red;width:10px;margin-top:5px;">霍霍霍</div>
没有文本的情况下，FF,Chrome,IE8~9下容器高度为0<br />
IE6,IE7下有高度,取决于当前文本的line-height的高度，line-height是随着相应的font-size做相应的比例缩放的。<br />
在有文本的情况下，，FF,Chrome,IE7~9下容器宽度确定，IE6宽度下被内容撑大。
</body>
</html>
测试如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>各浏览器对宽高的解析测试</title>
</head>
<body>
<h1>浏览器对设定高度，没有设定宽度的解析</h1>
<div style="border:1px solid red;height:10px;">呼哈呼哈哈</div>
<p>FF,Chrome,IE7~9下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大。<br />
而IE6下是会被内容撑大，高度限定失效。</p>
<p>解决IE6下的bug,必须加上overflow:hidden。</p>
<h1>浏览器对设定宽度，没有设定高度的解析</h1>
<div style="border:1px solid red;width:10px;"></div>
<div style="border:1px solid red;width:10px;margin-top:5px;">霍霍霍</div>
没有文本的情况下，FF,Chrome,IE8~9下容器高度为0<br />
IE6,IE7下有高度,取决于当前文本的line-height的高度，line-height是随着相应的font-size做相应的比例缩放的。<br />
在有文本的情况下，，FF,Chrome,IE7~9下容器宽度确定，IE6宽度下被内容撑大。
</body>
</html>
1064
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
