logo标签列表

Chrome 37 计算精度问题

cssgoogle-chromecss-calc
9
<div id="outerDiv">
    <div id="innerDiv"></div>
    <div id="remainderDiv"></div>
</div>

#outerDiv, #innerDiv, #remainderDiv{
    height: 100px;
}
#outerDiv{
    width: 55.5px;
    z-index: 1;
    background-color: red;
}
#innerDiv{
    width: calc(100% - 10px);
    z-index: 100;
    background-color: blue;
    float: left;
}
#remainderDiv{
    width: 10px;
    z-index: 100;
    background-color: green;
    float: left;
}

http://jsfiddle.net/yz8cwj3a/

结果: http://i.imgur.com/DYor2yb.png

这个示例展示了Chrome 37中的一个问题。在具有十进制像素的元素上使用calc（100％ - 10px）函数时，它总是向下取整。这会导致奇怪的事情发生。

在该示例中，外部div的宽度为50.5像素。两个内部div的宽度分别为calc（100％ - 10px）和10px。即使应该总共是50.5，它仍然显示红色背景。

问题似乎在Chome 37中引入。有人知道这个问题是否已被报告或者是否会解决吗？

编辑：我从评论中了解到问题已经存在较长时间。是否有任何（跨浏览器的）简洁方法来解决此问题？

这个问题似乎自从Chrome实现calc功能以来就一直存在（在23版和26版之间的某个时候）。这是每个版本的Chrome都存在的问题，直到现在。 - misterManSam
这个问题不仅限于 px 单位。这里也有同样的问题，但是使用了 em。(这是将 px 转换为 em 的懒人方法) - misterManSam
2
半个像素会是什么样子？ - Paulie_D
@Paulie_D - 四舍五入calc向下舍入不是一个bug吗？ - misterManSam
四舍五入是浏览器的功能......由于它们在渲染子像素时所选择或具有的能力。但我不会称之为缺陷。 - Paulie_D
1
@Paulie_D - 我希望行为至少是一致的。calc 向下舍入，而 width 向上舍入。真是疯狂！！ - misterManSam
2个回答
1

经过检查元素后，似乎明显的是：

1）width: 55.5px; 被四舍五入为56px，

2）width: calc(100% - 10px); - 100％ 的宽度被四舍五入为55px

这意味着在56px宽的容器中还剩下1px的红色。

因此，解决方法就是简单地不要给remainderDiv添加宽度，

并使用另一种“填充”容器的方法，例如overflow:hidden

FIDDLE

这样，余数div将是10px或11px - 但至少布局不会破坏。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接