# IE6下DIV高度显示的Bug

- Link: https://yjyj.net/css/336.html
- Published: 2007-12-30T00:29:24+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * IE6 会把过小的 div 高度按字体行高“托底”，导致 height 失效。
 * 解决思路很直接：给容器设极小字体，或用 overflow:hidden 锁住高度。
 * IE7、Firefox、Opera 不受影响，这类问题主要是老旧浏览器兼容坑。

引用自:[http://www.zeali.net/entry/502](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，避免被行高反向抬高。

❓ 延伸问答与排错指南（FAQ）

IE6里div高度为什么会被撑大？

因为 IE6 会把容器高度和字体行高强绑定，默认字体尺寸大约在 12-14px 左右。即使你写
了更小的 height，浏览器也可能按行高把盒子撑高，导致视觉上高度失控。

怎么让IE6里的小高度div正常显示？

常见做法有两种：一是给 div 强制设置很小的字体尺寸，例如 font:0px Arial;；二是设置
overflow:hidden;，让内容溢出被截断，从而阻止 IE6 自动抬高容器。

这个问题在其他浏览器也会出现吗？

原文说明该问题在 IE7、Firefox、Opera 下均不存在。也就是说，它更像是 IE6 的历史兼容
性缺陷，排查时应优先检查是否只在旧版 IE 环境复现。

📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [11px的简/繁体中文清晰字体的css设置](https://yjyj.net/css/18.html)
 * [JavaScript 点击按钮一键复制指定文本内容](https://yjyj.net/css/6419.html)
 * [图片缩放的问题](https://yjyj.net/css/461.html)
 * [学习收集-关于用CSS控制输入框input悬停交互样式](https://yjyj.net/css/492.html)
 * 热门必读[DMIT 全线缺货, 只剩搬瓦工了](https://yjyj.net/discover/7787.html)
 * 热门必读[俩月了, DMIT 终于补货了!](https://yjyj.net/share/7795.html)