html - CSS calc() 在 IE 中无法与 em 一起正常工作

Question

我有一个简单的场景，我希望两个框彼此相邻显示并占据页面的整个宽度，它们之间的边距为 0.75em。这是我的标记:

<div class="box"></div>
<div class="box"></div>

和CSS:

.box {
  float: left;
  width: calc(50% - 0.375em); /* 0.375 * (2 boxes) = 0.75 */
  margin-right: 0.75em;
}

.box:last-of-type {
  margin-right: 0;
}

这在 Chrome 上工作正常，但当我尝试在 IE11 中加载它时，第二个框换行到下一行。我已将 html 元素上的字体大小设置为 16px。有趣的是，如果我将 0.375em 替换为 6px (16px * 0.375 = 6px)，这些框会在 IE11 中正确显示在一行中。任何人有什么想法吗？

这是一个 JSFiddle，您可以在其中看到它在 IE 中不起作用:http://jsfiddle.net/Lcuu8/3/

Answer 1

当 em 等于 16px 时，IE 计算错误 0.375em。它得到的不是数学上正确的结果 6px，而是 5.92px。这可以通过将元素的宽度设置为 0.375em 并在开发人员工具中检查该元素来看出。在那里你可以看到 IE 也显示声明为 0.37em，所以它似乎删除了 0.37 之后的任何数字!当只使用 width: 0.375em 而根本不使用 calc() 时也会发生这种情况。

在这种情况下，该错误使每个框的宽度比应有的宽度大了一个像素的一小部分，因此第二个框不适合第一个框的右侧。

一个简单的解决方案是使用整数。在数学上，0.375 等于 3/8，因此您可以替换

width: calc(50% - 0.375em)

通过

width: calc(50% - 3em/8)