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元素的font-size设置为16px。有趣的是，如果我用6px（16px * 0.375 = 6px）替换0.375em，则IE11中的一行显示正确的框。有什么想法吗？

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

Answer 1

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

在这种情况下，bug会使每个盒子的宽度比它应该的像素大一些，因此第二个盒子不适合第一个盒子的右边。

一个简单的解决方案是使用整数。数学上，0.375等于3/8，所以你要替换

width: calc(50% - 0.375em)

通过

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

Answer 2

这可能是由于IE处理百分比的方式。我的建议是简化并允许IE以不同的方式处理百分比。我已在此jsfiddle

中创建了另一种方法

我已经创建了包装器

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

然后设置CSS以处理包装器内的边距

html, body { font-size: 16px; }
.boxWrapper {
    width:50%;
    float:left;
}
.box {
    height : 5em;
    background: slategray;
    margin-right: 0.375em;
    display:block;
}
.boxWrapper:last-child .box {
    margin-left: 0.375em;
    margin-right:0;
    background: silver;
}

Answer 3

在您的代码中，calc功能正常运行。但问题来自您用于计算的十进制数。

在Chrome中，值会被截断。例如，50, 50.5和50.6在Chrome中显示相同的宽度，而IE则没有。

在计算部分使用舍入值，您将在IE和Chrome中获得所需的结果。

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

DEMO

CSS calc（）在IE中与em无法正常工作

3 个答案: