使用CSS时的IE8浮动问题

Question

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

你可以在here.上看到这个问题，这是一个给我妻子的易趣模板。

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

有什么想法吗？

谢谢，卡雷格

Answer 1

当浏览你的页面时，我发现它默认进入怪癖模式，这是可能的问题，因为如果我强制它进入严格模式，它似乎解决了IE的所有情况下的浮动问题。

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

他解释了为什么会发生这种情况，以及如何修复它:)

希望它能帮上忙！

Answer 2

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

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