Microsoft Explorer边缘相同的方框阴影，两个不同的结果

Question

当你给出高度值时，会给出不同的结果？我是不是遗漏了什么？或者是微软的渲染有那么糟糕？

​

.box {
    background: #fff;
    width: 100%;
    clear: both;
    display: inline-block;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    box-shadow: 0 1px 0 rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.height-1{
  height:35px
}

.height-2{
  height:50px
}

<div class="box height-1">Lorem Ipsum</div>
<br>
<br>
<div class="box height-2">Lorem Ipsum</div>

​

Example Link

Answer 1

我试着用Edge做了一个测试，得到了类似的结果。这两个盒子有相同的阴影。

下面是我的测试结果。

​

​

你在标题中提到了“Microsoft Explorer”，所以我也用IE11做了一个测试，得到了类似的结果。

​

​

因此，我不能产生上述代码的问题。您可以再次尝试进行测试，如果问题仍然存在，则尝试发布该问题的图片。

如果我们在生成问题时遗漏了任何步骤，也请尝试通知我们。

我们将尝试纠正自己，并再次尝试进行测试。