---
title: "IE6下DIV高度显示的Bug"
url: "https://yjyj.net/css/336.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2007-12-30T00:29:24+08:00"
updated_at: "2007-12-30T00:29:24+08:00"
categories: "前端杂烩"
tags: "Bug, CSS布局技巧, HTML/CSS, Windows排错指南, 前端开发实战"
summary: "这篇老派前端排错笔记专治 IE6 下 div 高度被“自动抬高”的怪问题：明明写了 6px，页面却被字体行高撑成十几像素。文章给出两种实操解法——压低字体尺寸或用 overflow:hidden 限制溢出，适合做兼容性回溯和老项目修复。"
source: "生猛大蝦 (https://yjyj.net)"
---

# IE6下DIV高度显示的Bug

> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/336.html) · 作者：小 虾 · 发布时间：2007-12-30

## 30 秒核心看点 (TL;DR)

- 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 环境复现。

---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)