在 Internet Explorer 7 中设置 div 高度的问题答案

【问题标题】：Problem setting div height in Internet Explorer 7在 Internet Explorer 7 中设置 div 高度的问题
【发布时间】：2011-01-22 04:00:32
【问题描述】：

我有一个带有漂亮曲线背景图像的 div，因此它在所有浏览器上都具有圆角。

问题在于，在 Internet Explorer 中，背景图像后面是背景色线。如果我设置了 div 的高度，Firefox 和 Chrome 都会缩小 div 的高度，但是 IE 不会调整任何东西。

这是我的 CSS。请注意，其余的 CSS 可以在 IE（和 FF/Chrome）中正常应用。

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
}

关于我缺少的高度是否有一些 IE 'gotcha'？

这里有一些额外的细节：

FF 或 Chrome 中未显示该行。
页面上的 JavaScript 很少，不会影响其呈现方式。
对 css 的其他更改会应用于 div。

【问题讨论】：

也许添加溢出：隐藏？

标签： css internet-explorer height

【解决方案1】：

如果我能理解的话，高度不会因为行高和字体大小而受到影响。所以你必须添加

line-height: 0;
font-size: 0;

【讨论】：

这是可能的。虽然我没有内容，但它可能仍在显示内容可能去的空间。
这是问题所在。非常感谢您的建议！

【解决方案2】：

记得设置文档类型，这样浏览器就不会进入 quirksmode

你的 html 文档的第一行应该是

<!DOCTYPE html>

你也可以像这样使用更传统的 xhtml 文档类型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

但我会推荐第一种兼容 html5 并且在 IE 中也能正常工作的类型，即使他们不使用 html5，它看起来也比那种糟糕的 xhtml doctype 好得多；）

还请记住，您不能将高度应用于inline 元素，只能应用于块级元素，因此您的元素需要为display: block 或display: inline-block 或类似的;)

【讨论】：

感谢您的建议，我会调查一下，看看是否有帮助。（对不起，我还不能 +1，没有足够的代表）
Doctype 已经设置好了，所以这不是问题。不过，感谢您的建议。

【解决方案3】：

尝试将溢出：隐藏到您的 CSS

#MSBottomSlot .topCurve {
    background:url("images/topCurve.jpg"); 
    background-repeat:no-repeat;
    height:10px; /* Changing this value does nothing in IE */
    width:100%;
    overflow:hidden; 
}

【讨论】：

一个好建议，我会看看，让你知道结果如何。
溢出不是问题（行高是）。感谢您的帮助！