Question

在下面的代码中，所有内容均可在Chrome和Firefox中正确显示。 inner元素完全延伸到outer。

在IE11中，inner元素未完全拉伸到容器。并且存在1px的间隙，就像在图片上一样。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    .outer {
      background-color: yellow;
      border: 1px solid black;
    }
    
    .inner {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div>Outer</div>
    <div class="inner">Inner</div>
  </div>

</body>

</html>

为什么会发生？
如何解决？

UPD1。。要重现它，请缩放页面。

Answer 1

我必须承认我不知道为什么会这样，但是至少我找到了一种解决方法。

我以为我可以使用box-shadow: 0 0 0 1px black;并删除边框，但这会以不同的方式缩放元素（并且IE在渲染细密的盒子阴影方面确实很糟糕，会产生比这更多的意外结果）。将外部div设置为overflow: hidden;并在内部div上使用绿色的盒子阴影来填充间隙也没有用，盒子阴影被切断了。甚至flexbox和浮动内容也无济于事，这似乎不像是框大小或行高问题。

唯一可行的方法是用outline: 1px solid black;替换边框

这也会使元素的缩放比例不同，但是可以通过添加1px填充+框阴影方法来填充来重新调整它的距离：

.outer {
    padding: 1px;
    background-color: yellow;
    outline: 1px solid black;
    outline-offset: -1px;
    overflow: hidden;
}

.inner {
    background-color: green;
    box-shadow: 0 2px 0 green;
}

IE中两个div之间的1px小间距

1 个答案: