logo标签列表

CSS calc()四舍五入

cssroundingcss-calc
3
这个问题类似于Chrome 37计算精度舍入，但实际问题更加复杂，所提供的解决方案对此情况无效。 

#outerDiv, #leftDiv, #middleDiv, #rightDiv{
    height: 100px;
    position: absolute;
}
#leftDiv, #rightDiv{
    width: 20px;
    z-index: 100;
    background-color: green;
}
#outerDiv{
    width: 100.5px;
    z-index: 1;
    background-color: red;
}
#middleDiv{
    width: calc(100% - 40px);
    z-index: 100;
    background-color: blue;
    left: 20px;
}
#leftDiv{
    left: 0;
}
#rightDiv{
    right: 0;
}
<div id="outerDiv">
    <div id="leftDiv">L</div>
    <div id="middleDiv">M</div>
    <div id="rightDiv">R</div>
</div>

在Chrome中的结果: http://i.imgur.com/vNvFfHC.jpg

更详细地解释一下：outerDiv的宽度取决于另一个div中随机数量的文本，该div也位于outerDiv内部。左侧和右侧的div包含图像，因此它们的宽度是静态的。

我们目前的解决方案是将calc更改为: calc(100% - 40px+ 1px); 有更好的解决方案吗？

1
用户提出关闭建议：问题是在Chrome中看不到红线。问题是如何在不重叠内部div的情况下覆盖#outerDiv。 - recursive
关于浏览器在四舍五入方面的可怕差异，至少有一个不错的比较：http://cruft.io/posts/percentage-calculations-in-ie/ - sebilasse
2
我知道这已经很老了，但是在Safari（MacOS）上仍然存在这个问题。是否有任何解决方法适用于所有浏览器？添加1像素会使它在具有良好工作的calc()的浏览器（如Chrome和Firefox）中看起来很奇怪。 - Froxx
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接