css - IE 中的 Calc 函数将值四舍五入并将项目推送到下一行

Question

我已经使用 calc 函数设置了元素的宽度，如下所示

width: calc((100% - (2rem * 2)) / 3);

在 Chrome 中，IE 中的计算宽度为 412.663px，但它被计算为 412.67px，因此在 IE 中，最后一项推送到下一行/行。

如果我手动将 IE 中的宽度设置为 412.663px，则项目按预期显示在一行中。这意味着在 IE 计算宽度中舍入小数是这里的一个问题。

知道如何获得与 Chrome/Firefox 一样精确的 IE 计算宽度吗？

Answer 1

尝试使用100vw而不是100%您的计算：width: calc((100vw - (2rem * 2)) / 3);.

我认为，这应该可以解决问题。

Answer 2

两种解决方案都解决了这个问题，但我更喜欢解决方案 2。

第一：修复计算中的圆角像素

 width: calc(((100% - (2rem * 2)) / 3) - 0.1px);

第二：用100vw代替100%

width: calc((100vw - (2rem * 2)) / 3);