css - 带有背景位置的 IE（错误）百分比

Question

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

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

这在Firefox、Chrome和Safari中运行良好，但在任何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）：

铬（12.0.742.100）：

野生动物园（5.0.2）：

Internet Explorer（6、7 和 8 - 结果都一样）：

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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