IECSSBug系列：HeightExtraExtendedBug
时间：2023-03-14 00:21:34
科技观察
影响版本该bug影响IE6渲染元素长于指定高度（主要适用于小高度）19问题描述虽然这些bug出现在页面上不是很语义化，但最有经验的开发者可能迟早会遇到这个bug，导致IE盒子模型生成一个非常小的高度值。当您向此元素添加一些文本时，该错误会变得很明显。下面的例子可以让你更容易理解HTML代码：
Lorem CSS代码：div{height:3px;background:#dd0;}#text{margin:10px0;}/*irrelevanttothebug*/首先提醒大家，background和margin属性与这个bug无关，我写它们只是为了方便大家链接代码展示风格与演示风格更接近。这个演示渲染了两条3像素高的线，它们实际上只不过是div标签。其中一个包含“Lorem”这个词，在任何智能浏览器（IE7下）这个词都会溢出到第二个div中，所以在IE7中，这个div的高度将保持3个像素。当你在IE7以下版本看上面的demo时，会出现一些意想不到的坏问题。我们的两个div都比3像素高一点。发生了什么？让我们看一下包含单词“Lorem”的div，您应该注意到这个div扩展了一点以容纳该单词，您还会注意到没有任何文本的div扩展到相同的高度。这个错误现在更有意义了，即使在空元素中，IE也至少有一个空格。通过打破盒子模型产生的空间，我们的div扩展而不是让这个空间溢出到div之外。假设空间由font属性控制。现在，聪明的你已经准备好在听到溢出和字体时尝试做一些事情。解决方案以下是上述错误的解决方法（按类型排序）“清晰”的解决方案-有副作用它简洁明了。我们将使用overflow属性来修复IE的溢出问题。以下是我们修复后的demoHTML代码：
Lorem CSS代码：div{height:3px;background:#dd0;overflow:hidden;}#text{margin:10px0;}/*irrelevanttothebug*/我们在div中添加overflow:hidden样式来解决高度膨胀的bug。事实上，在添加overflow属性的地方，以前在那些过于聪明的浏览器（IE6-）中的空格位置现在被隐藏了。“清除”解决方案的副作用此解决方案的一个副作用是所有溢出的元素都将被隐藏，可能还有一些您想要的元素“清除”解决方案-有副作用2009年7月17日星期五10:11提出的解决方案:15修订描述了所有受影响的解决方案在此解决方案中，我们将为font-size属性分配一个值0。从个人的角度，我建议你使用另一种“清晰”的解决方案，因为有些用户可能会禁用页面中的字体指定功能（勾选浏览器菜单栏中的Tool（工具）->InternetOptions（互联网设置））->General（常规）->Accessibility（辅助功能）->Ignorefontsizes（忽略字体大小））。以下是我们修复后的demoHTML代码：
Lorem CSS代码：div{height:3px;background:#dd0;font-size:0;}#text{margin:10px0;}/*irrelevanttothebug*/不用说了，如果你了解了这个bug的原因，你就可以解决所有的问题，将font-size设置为0，我们认为这个空格和文字应该很小不产生任何溢出。再次，我建议你使用另一种解决方案，使用overflow:hidden来解决问题，因为用户很可能实际上在浏览器中禁用了字体调整，那么你所做的所有兼容性都会功亏一篑。清除方案的副作用该方案的一个副作用是所有溢出的元素都会被隐藏，可能你想要的一些元素也会被隐藏原文链接：http://haslayout.net/css/Expanding-Height-Bug：http://blog.jobbole.com/49534/
