IE8 的 CSS 浮动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1404547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 float issue with CSS
提问by Wayne Austin
I'm sure this must have been covered before because I'm sure I'm not the first to do this, but I can't find the answer. I am creating a shadow effect for a <div>using repeated background images. In the bottom two corners I use small 9x5 px images. I float them left and right and in Firefox and Safari they look perfect. In IE8 (and possibly other IEs) they float too far to the left and right about about 3px.
我确定这之前肯定已经涵盖了，因为我确定我不是第一个这样做的人，但我找不到答案。我正在为<div>使用重复的背景图像创建阴影效果。在底部的两个角中，我使用了 9x5 像素的小图像。我将它们左右浮动，在 Firefox 和 Safari 中它们看起来很完美。在 IE8（也可能是其他 IE）中，它们向左和向右浮动大约 3px 太远。
You can see the issue at here.It's an ebay template for my wife.
Thus far I've tried setting display:inline which was a fix for a similar IE6 issues. I also tried setting image margins and padding to 0px with no luck.
到目前为止，我已经尝试设置 display:inline，这是对类似 IE6 问题的修复。我还尝试将图像边距和填充设置为 0px，但没有成功。
Any ideas?
有任何想法吗？
Thanks, Carraig
谢谢，卡莱格
回答by Wayne Austin
Whilst browsing your page I found that it is defaulting into quirks mode, which is the probable issue, because if I force it into Strict it seems to fix your floating problem in all cases of IE.
在浏览您的页面时，我发现它默认为 quirks 模式，这是可能的问题，因为如果我将其强制为 Strict，它似乎可以解决所有 IE 情况下的浮动问题。
have a read of ppk's article here: http://www.quirksmode.org/css/quirksmode.html
在这里阅读 ppk 的文章：http://www.quirksmode.org/css/quirksmode.html
he explains why its happening and how to fix it :)
他解释了为什么会发生以及如何解决它:)
Hope it helps!
希望能帮助到你！
回答by Khodor
I think it has something to do with the float elements getting outside the borders of the div, try inserting this before you close the parent div:
我认为这与浮动元素超出 div 的边界有关，尝试在关闭父 div 之前插入它：
<div style="clear: both; font-size: 1px; line-height: 0px;"> </div>
