具有背景位置的IE(bug)百分比

时间:2011-06-21 04:10:43

标签: css internet-explorer background-position

我在IE中遇到问题,只有柔性/流畅布局中元素的背景图像。

基本上,我需要背景图像(1px x 1xx)来垂直平铺。当布局为全宽时,背景图像位于左侧 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;

Firefox (v3.6.3):

enter image description here

Chrome (12.0.742.100):

enter image description here

Safari (5.0.2):

enter image description here

Internet Explorer (6,7和8 - 所有相同的结果):

enter image description here

所以我的问题是,这只是一个IE问题,浏览器无法计算不完整的百分比吗?或者,是否有修复或我遗漏的东西?

3 个答案:

答案 0 :(得分:3)

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

仅供记录,我的em测量结果将与此0.7056367相似,而不是70.56367%(在我的测试中)0.7070%那么,对我而言,IE似乎非常可行,最近的百分点(70.56%)或最接近的百分之一({{1}})四舍五入。

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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