IE7 中的浮动项目中断，在 IE8+ 中有效答案

【问题标题】：Floated item breaks in IE7, works in IE8+IE7 中的浮动项目中断，在 IE8+ 中有效
【发布时间】：2012-10-11 10:34:41
【问题描述】：

我有一个开发站点 (http://www.tentenstudios.com/clients/swls/our-surgeon) 在 FF、Chrome 和 IE8+ 中运行良好，但在 IE7 中右角图像中断，我似乎无法弄清楚是什么导致了问题。右上角的图像在一个左浮动的容器 DIV 中，但它上面还有一个绝对定位的图形，不知道这是否与它有关。

感谢任何人提供的任何帮助！

根据请求，这是一个带有（我认为）相关代码的 JSFiddle：http://jsfiddle.net/HyVcG/

另外，要查看这项工作，您可以使用 IE 打开链接并按 F12 以调出开发控制台，然后单击浏览器模式：IE9 并将其更改为 IE7。

【问题讨论】：

创建一个jsfiddle.net 可能会有所帮助，这样其他人就可以修改代码来帮助您。您可能还想显示一个屏幕截图，因为没有多少人会安装 IE7。
好建议，我更新了帖子。

标签： css internet-explorer

【解决方案1】：

.eightcol 和 .fourcol 的宽度和内边距加起来超过 100%。某些浏览器可能会以不同于其他浏览器的方式舍入十进制值。

65.4546% + 3.63636% + 30.9091% = 100.00006%

这是jsfiddle demo，您可以在其中看到右列在 IE6/7 中中断，但在所有其他浏览器中都可以。

这个 CSS 网格可能不是为支持 IE6/7 而构建的。如果一切都失败了，您可以编辑或覆盖 CSS 网格中的一些宽度或边距值。但是每次升级 CSS 网格时都必须重新应用这些更改。不确定是否有更简单的解决方案。

编辑：为了比较，这里是jsfiddle demo 的一个版本，其中整数百分比加起来正好是 100%。

【讨论】：

嗯...我明白你的意思，但尽管从 .eightcol 中砍掉了 0.1%，但它仍然会中断。
如果我将边距减少 0.01%，或者如果我将右列减少 0.1%，它似乎有效。如果我将左列减少 0.1%，它似乎也能正常工作（至少，我最近几次尝试过）。
我设法将边距削减了 0.05%，使图像位于右上角，但这也导致布局的下半部分中断，就好像 clear:both 没有任何效果一样。见tentenstudios.com/misc/broken.jpg
我可能只使用并让 IE7 的人吸一口。
小数四舍五入的结果似乎因父容器的大小而异。如果我调整实时网页的大小，右栏会在中断和不中断之间切换。想知道整数 % 值是否会更稳定。