图片下方的IE空间？答案

【问题标题】：IE space below image?图片下方的IE空间？
【发布时间】：2010-11-02 17:41:11
【问题描述】：

如何为 Internet Explorer 修复此页面？由于某种原因，它似乎在背景图像下方添加了一个空格..

设计是这样的：

                 ------------------
                 |   TOP IMAGE    |<- base_top.png
                 ------------------
                 |  |          |  |
base_sides.png ->|  | CONTENT  |  |<- base_sides.png
                 |  |          |  |
                 |-----------------
                 |  BOTTOM IMAGE  |<- base_bottom.png
                 ------------------

【问题讨论】：

标签： html css

【解决方案1】：

How can I set CSS only for specific IE browsers?

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

同样有效。

【讨论】：

【解决方案2】：

IE 有默认的font-size 和line-height 因为该图像高度小于 IE 默认的 font-size 和 line-height。

设置：

font-size:0 
line-height:0 
overflow:hidden

【讨论】：

溢出隐藏解决了我的问题。

【解决方案3】：

我建议设置 margin:0;和填充：0；在顶部的 * (all) 元素的样式表声明中。这样问题就不会再出现了。如果我可以提出其他建议？要在中心对齐元素，我更喜欢 margin-left:auto;和边距右：自动；正如 W3.org 所建议的那样：http://www.w3.org/Style/Examples/007/center

【讨论】：

【解决方案4】：

这是因为 IE 有一个奇怪的想法，即每个元素至少应该高一个字符。

如果您将overflow:hidden; 添加到#top 和#bottom 样式，这将阻止IE 使元素大于您指定的大小。

一般提示：
向页面添加适当的 doctype，使其以符合标准的模式呈现，这对 IE 呈现页面的方式有很大帮助。

W3C: Recommended list of DTDs

【讨论】：

【解决方案5】：

您需要在您的 css 中明确给出 img {margin-bottom:0;}。 IE 会自动在图像周围放置一个缓冲区，但它应该听从样式表中的规则。

【讨论】：

它们不是图像，而是某些 div 的背景图像。应该更清楚，抱歉。