CSS 的 IE8 浮动问题答案

【问题标题】：IE8 float issue with CSSCSS 的 IE8 浮动问题
【发布时间】：2009-09-10 10:44:13
【问题描述】：

我敢肯定这之前一定已经介绍过，因为我确定我不是第一个这样做的人，但我找不到答案。我正在使用重复的背景图像为<div> 创建阴影效果。在底部的两个角落，我使用了 9x5 像素的小图像。我左右浮动它们，在 Firefox 和 Safari 中它们看起来很完美。在 IE8（可能还有其他 IE）中，它们向左和向右浮动了大约 3px。

你可以在here.看到这个问题，这是我妻子的 ebay 模板。

到目前为止，我已经尝试设置 display:inline，这是对类似 IE6 问题的修复。我还尝试将图像边距和填充设置为 0px，但没有成功。

有什么想法吗？

谢谢，卡莱格

【问题讨论】：

标签： css internet-explorer-8 css-float

【解决方案1】：

在浏览您的页面时，我发现它默认为 quirks 模式，这是可能的问题，因为如果我将其强制为 Strict，它似乎可以解决所有 IE 情况下的浮动问题。

在此处阅读 ppk 的文章： http://www.quirksmode.org/css/quirksmode.html

他解释了它发生的原因以及如何解决它:)

希望对您有所帮助！

【讨论】：

谁能想到...会因为做对而受到惩罚。实际上，我什至没有想过插入 doctype 行，因为它只是 ebay 的模板。

【解决方案2】：

我认为这与浮动元素超出 div 的边界有关，请在关闭父 div 之前尝试插入：

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>

【讨论】：

谢谢。我正在考虑这样的事情，但是您的代码就像仅在元素之间复制粘贴的魅力:)