原作者charlee、原始链接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本声明。
box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型，它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。
各个元素的含义如下：
- margin: box外边界到外层元素的距离，即余白。
- border: box的边界宽度。
- padding: box内的内容到box内边界的距离，即边距。
- width: box的宽度。
- height: box的高度。
其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积为定义的 width/height 再加上 margin、padding、border的大小。
下图演示了一个box模型的大小计算方式，背景中每个方格为 10px。源代码如下：
#box {
width: 150px;
height: 100px;
background: #F00;
border: solid 20px green;
padding: 30px;
margin: 10px;
}
<div id="box">
<div id="content"></div>
</div>
可以看到，这个 150x100 的 box 实际上中间的内容部分为 150x100，算上 margin、border、padding 的总大小为 270x220。
而 IE 在 Quirk模式(兼容模式)下，计算width和height时会将margin、border、padding算进去， width和height成为了box的总大小。上面的代码在 IE 下显示结果如下：
那么如何让 IE 与其他的浏览器显示效果相同？可以通过在HTML文档开头指定 DOCTYPE 使 IE 工作在 Standard模式而不是 Quirk模式下。例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
....
下面是各种 DOCTYPE 下IE对box模型的渲染方法的测试页面，有兴趣的可以用IE打开看看。
分享到：
相关推荐
标题中的“莫名其妙的IE 3像素Bug...总的来说，这个3像素Bug是前端开发中一个常见的挑战，尤其是对那些需要确保网站在IE中正常显示的开发者来说。理解这个问题的原因和解决方法对于提升跨浏览器兼容性的技能至关重要。
2. **盒模型问题**：IE6对盒模型的处理与W3C标准不一致，元素的宽度和高度计算不准确，这可能导致布局混乱。开发者需要通过设置`box-sizing`属性或者特定的CSS hack来解决。 3. **PNG透明度支持**：IE6不完全支持...
开发者可以通过设置`box-sizing`属性为`border-box`来统一盒模型，但此属性仅在较新的浏览器中有效。对于IE6，可以使用特定的CSS hack，如`*width`或`_width`来调整元素宽度。 3. **浮动元素问题**：IE6有时无法...
可以通过设置`*{box-sizing:border-box}`来统一盒模型。 6. **PNG透明度**：IE6不支持PNG24的透明效果，可以使用AlphaImageLoader滤镜来解决。 7. **DOCTYPE声明**：确保文档使用正确的DOCTYPE，这会影响IE的渲染...
在网页开发中，IE6（Internet Explorer 6）浏览器的盒子模型（Box Model）是一个重要的概念，它涉及到元素宽度、高度、内填充（padding）和边框（border）的计算方式。在W3C标准中，一个元素的总宽度等于其内容宽度...
3. **浮动元素的清除**：IE6、7在处理浮动元素的清除时有bug，可能需要使用额外的空元素或`clearfix`类来解决。例如，可以为父元素添加`zoom:1`触发hasLayout，或者使用`:before`伪元素结合`clear:both`。 4. **...
2. 盒模型差异：IE6和7使用不同的盒模型，可以通过`box-sizing`属性或`*{box-sizing:border-box;}`修复。 3. 浮动问题：IE6下浮动元素可能导致高度塌陷，需使用clearfix方法解决。 4. 层叠上下文：IE浏览器对于层叠...
1. **IE6的盒模型问题**：IE6在处理CSS盒模型时存在bug，导致元素的宽度计算出现问题。 2. **IE7的浮动元素错位**：在IE7中，当元素设置为`float`时，可能会出现与其他元素错位的现象。 3. **IE8的渲染模式选择**：...
然而，对于浮动（float）、透明度（opacity）以及盒模型（box model）的理解与W3C标准存在显著差异，这导致布局问题成为开发者的一大挑战。 接着是IE6，它在2001年发布，虽然比IE5有所改进，但在CSS支持上仍然存在...
6. **IE三像素bug** 当一个`float`元素旁边还有一个非`float`元素时，在IE6/7中可能会出现一个3像素的空白区域。解决方法是为`float`元素添加负的`margin-right`。 ```css #left { float: left; width: 50%; ...
- **问题描述**：IE浏览器不支持`min-height`属性，导致元素的高度无法按预期显示。 - **修正方法**：可以使用条件注释为IE浏览器单独设置高度。 - **示例代码**： ```css .container { width: 20em; padding: ...
当元素设置为`display:inline-block`时，IE6会出现双边距bug，可以通过设置`display:block`或`zoom:1;`（触发hasLayout）来消除。 5. **hasLayout机制** IE6特有的hasLayout机制，当元素满足某些条件时，会自动...
解决方法：使用`box-sizing`属性，将其设置为`border-box`（IE模式）或`content-box`（标准模式）。 二、浮动元素处理 1. IE的浮动：IE6有时会出现浮动元素的父元素高度塌陷问题，需要额外的清除浮动技巧，如`...
文件“浮动层在网页中定位.txt”可能详细介绍了如何在IE6下使用浮动层，并解决可能出现的位置偏差问题，因为IE6的布局模型与其他现代浏览器有所不同。 4. **设置最小宽度**：IE6在处理元素的最小宽度时存在bug。...
IE和其他现代浏览器在处理盒模型（Box Model）上存在差异。在IE中，元素的实际宽度等于`margin-left + width + margin-right`，而在Firefox/Mozilla中，实际宽度则等于`margin-left + border-left-width + padding-...
可以使用`box-sizing`属性调整元素的盒模型。 3. **浮动元素问题** 浮动元素可能导致父元素高度塌陷，可以通过清除浮动（`clear:both`）或使用`clearfix`类来解决。另外，浮动元素可能导致布局混乱，需合理使用`...
5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 ...