想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。
测试如下:
<!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>