技术写在博客里，理论记在心中！
之前转载了一篇文章，关于高度属性异常的一些测试。在自己的实际开发中，让然遇到了些问题。自己重新在前人的基础上做了几个简单测试。
个页面设置两个三个DIV，一个为body，包含两个:left和right；
HTML代码：
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
CSS代码：
*{
margin:0;
padding:0;
}
#box{
width:400px;
margin:5px;
overflow:hidden;
}
#left{
width:200px;
float:left;
background:#00f;
}
#right{
width:200px;
float:right;
background:#FF0000;
}
三个div都没有设置高度，在FireFox、chrome下没问题，高度为0，不显示内容，正常；在IE下，我用IETEST分别测试了IE6、IE7、IE8，都显示了高度，截图如下
按照上文的解释，可能是IE下默认字体造成。两种解决方法：1、overflow:hidden，2、font-size:0px;我在IE系列测试，给左盒子添加overflow:hidden，有盒子添加:font-size:0px；IE6、7、8结果相同，如下：
发现，高度为0时，overflow无效，而font-size虽然起了作用，但接近2px(目测。。)的高度值依然不是我们想要的，结果依然不正常，说明高度为0时，overflow、font-size:0px无效。
大家，会问，IE下是否默认HEIGHT不是为0呢？好，在给左右盒子添加了height:0px属性后，IE系列依然显示如上图。说明此时的元素显示的出来的高度并不是由height属性决定的。
接下来，开始测试height>0，时候的情况。分别给左右盒子设置height:1px；先上正常情况下的显示，下图为firefox、chrome下的结果：
(注：即使这两种标准浏览器，不给左右盒子设置overflow:hidden，font-size：0px，也是正常显示。)
而在IE系列：
有点怪，做盒子在overflow:hidden属性下，正常。而font-size:0px，依然不正常，说明在height:1px时，overflow已然帮助我们正常的显示height值，font-size则失效。
增加height为2px，此时所有浏览器都正常显示：
我又增加了些height的高度，都正常显示，说明，在height>=2px时，overflow:hidden,font-size的确如前人总结的那样，能在IE下（不仅仅IE6）帮助我们正常显示高度小于18px的盒子。备注：并没有完全测试>18px时的结果，这里引用前人的结果；之所以说不仅仅是IE6，因为，我测试的时候，若不加overflow,font-size，IE6、7、8，都不能正常显示小盒子（IE7、8不能正常显示，其实是我测试的一个BUG，文章结尾会跟大家说明）。
那么，总结如下：
height:2px-18px之间，IE6、7、8下无法正常显示高度，因为默认字体导致高度依然显示为18px。利用overflow:hidden,font-size:0px可以顺利解决。
为什么0px无法正常显示呢？
@_@，其实，是测试的时候没有把html的标准加进去<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">。。。加进去后，重新测试IE6、7、8。的确如前人所说，只有IE6存在默认字体影响行高的问题。
而且，声明了标准后，0px行高也能正确设置。
建议：1、大家使用overflow:hidden。因为，加入你设置的小盒子要加入文字呢？font-size为0，会让文字无法正常显示
2、当设置height:0px时，IE6下默认不加height属性时，该块会继承父块div高度，所以，要想设置确定的height高度，最好还是写清楚
3076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
