引用自:http://www.zeali.net/entry/502
IE6下默认的字体尺寸大致在 12 – 14px 之间，当你试图定义一个高度小于这个默认值的 div 的时候， IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度，实际在 IE 下显示的仍然是一个 12 px 左右高度的层。
要解决这个问题，可以强制定义该 div 的字体尺寸，或者定义 overflow 属性来限制 div 高度的自动调整。比如 <div style="height: 6px; font: 0px Arial;"></div> 或者 <div style="height: 6px; overflow: hidden;"></div> 都可以阻止 IE 的自作聪明。
该问题在 IE7 / Firefox /Opera 下均不存在。
这类问题放到今天看，属于典型的老浏览器兼容坑：不是代码逻辑错了，而是渲染引擎对盒模型和行高的处理太“自作聪明”。排查时要先确认是否真的是高度问题，还是内容、行高、默认字体共同作用。实操上，优先用 overflow:hidden 控制视觉边界；若是纯装饰性空块，再考虑把字体尺寸压到 0，避免被行高反向抬高。
IE6里div高度为什么会被撑大？
因为 IE6 会把容器高度和字体行高强绑定，默认字体尺寸大约在 12-14px 左右。即使你写了更小的 height，浏览器也可能按行高把盒子撑高，导致视觉上高度失控。
怎么让IE6里的小高度div正常显示？
常见做法有两种：一是给 div 强制设置很小的字体尺寸，例如 font:0px Arial;；二是设置 overflow:hidden;，让内容溢出被截断，从而阻止 IE6 自动抬高容器。
这个问题在其他浏览器也会出现吗？
原文说明该问题在 IE7、Firefox、Opera 下均不存在。也就是说，它更像是 IE6 的历史兼容性缺陷，排查时应优先检查是否只在旧版 IE 环境复现。
发表回复