IE 中的 Calc 函数舍入值并使项目推送到下一行
Calc function in IE roundes the value and made items to push to next line
我已经使用 calc 函数设置了元素的宽度,如下所示
width: calc((100% - (2rem * 2)) / 3);
在 Chrome 中,计算出的宽度在 IE 中为 412.663px,但在 IE 中计算为 412.67px,因此在 IE 中最后一个项目被推到下一个 line/row。
如果我在 IE 中手动将宽度设置为 412.663px,项目将按预期显示在一行中。这意味着在 IE 计算宽度中四舍五入小数点是这里的一个问题。
知道如何让 IE 计算的宽度与 Chrome/Firefox 一样精确吗?
尝试使用 100vw
而不是 100%
进行计算:width: calc((100vw - (2rem * 2)) / 3);
.
我想,这应该可以解决问题。
两种解决方案都解决了问题,但我更喜欢解决方案 2。
首先:修复计算中的圆角像素
width: calc(((100% - (2rem * 2)) / 3) - 0.1px);
第二:用100vw代替100%
width: calc((100vw - (2rem * 2)) / 3);
我已经使用 calc 函数设置了元素的宽度,如下所示
width: calc((100% - (2rem * 2)) / 3);
在 Chrome 中,计算出的宽度在 IE 中为 412.663px,但在 IE 中计算为 412.67px,因此在 IE 中最后一个项目被推到下一个 line/row。
如果我在 IE 中手动将宽度设置为 412.663px,项目将按预期显示在一行中。这意味着在 IE 计算宽度中四舍五入小数点是这里的一个问题。
知道如何让 IE 计算的宽度与 Chrome/Firefox 一样精确吗?
尝试使用 100vw
而不是 100%
进行计算:width: calc((100vw - (2rem * 2)) / 3);
.
我想,这应该可以解决问题。
两种解决方案都解决了问题,但我更喜欢解决方案 2。
首先:修复计算中的圆角像素
width: calc(((100% - (2rem * 2)) / 3) - 0.1px);
第二:用100vw代替100%
width: calc((100vw - (2rem * 2)) / 3);