带有背景位置的 IE（错误）百分比答案

【问题标题】：IE (bug) percentages with background-position带有背景位置的 IE（错误）百分比
【发布时间】：2011-06-21 04:10:43
【问题描述】：

我在 IE 中遇到问题，只有在灵活/流畅布局中的元素的背景图像。

基本上，我需要垂直平铺背景图像（1px x 1px）。当布局为全宽时，背景图像位于左侧 676px 处，转换为百分比时等于 70.56367% (676px divide by it's container of 958px)。

这在 Firefox、Chrome 和 Safari 中工作正常，但在中不工作 strong> 任何 IE（6,7 和 8）。只有当百分比是一个完整的数字而不是一个分数时，背景位置似乎才起作用。当设置为 70% 或 71% 等时，背景位置会发生变化。

这是我所拥有的以及它在浏览器中的显示方式：

background:url(link/to/image.gif) repeat-y 70.6680584551148% 0;/*676px/958px*/

我还尝试将背景位置设置为单独的 X 和 Y 值（但结果相同）：

background-position-x:70.6680584551148%;/*676px/958px*/
background-position-y: 0;

火狐（v3.6.3）：

Chrome (12.0.742.100)：

Safari (5.0.2)：

Internet Explorer（6、7 和 8 - 结果相同）：

所以我的问题是，这只是浏览器无法计算不完整百分比的 IE 问题吗？或者，是否有修复或我缺少的东西？

【问题讨论】：

【解决方案1】：

我最近正在使用em 制作基于百分比宽度的可扩展网站设计。对我来说幸运的是，它只是原型设计，因为事实证明，IE 似乎忽略了小数点后第二位的任何内容。您可以通过加载 IE8 并按 F12 调出开发控制台来亲自查看。找到带有百分比的 CSS 并查看它的含义。

仅作记录，我的em 测量值会像这样0.7056367 而不是这个70.56367%（在我的测试中）会变成0.70。那么，在我看来，IE 最多四舍五入到最接近的百分点 (70%) 或最接近的百分之一 (70.56%)。

【讨论】：

不幸的是，情况似乎如此。 IE 看起来好像正在将百分比四舍五入到最接近的整数。尽管在 IE 的开发者控制台中说的是 70.56%，但它似乎并没有应用 0.56%，而只是应用了 70%。
@Dan：是的。就修复它而言，也许您可以改用70%，它从958px 得到670.6px。每个浏览器处理半像素而不是小数百分比的方式可能会让您更幸运。
我希望它是如此简单 - 不幸的是宽度非常精确。一切都很好，我将快速浏览一下matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts，作为一种可能的新网站布局方式。感谢您的反馈意见。我再等几个小时，看看其他人是否有反馈/解决方案。如果没有任何问题，我会更乐意将您的答案标记为正确。干杯 =)

【解决方案2】：

IE 总是让我们做更多的工作。也许使用不同的 css 样式是答案

<!--[if gte IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

【讨论】：

【解决方案3】：

背景图片应适合容器 DIV 的宽度，因此您的代码应如下所示：

background:url(link/to/image.gif) scroll repeat-y 0 0;

【讨论】：

这是一个灵活/流畅的布局。当浏览器窗口缩小时，背景图像必须移动到与它作为分隔符的容器相同的宽度。所以让背景图片与容器的宽度相同并不能解决问题，因为一旦用户减小浏览器宽度，图片将不再对齐。