IE 中两个 div 之间的 1px 小间隙答案

【问题标题】：small 1px gap in IE between two divsIE 中两个 div 之间的 1px 小间隙
【发布时间】：2019-07-05 21:55:39
【问题描述】：

在下面的代码中，所有内容都在 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。要重现它，您应该缩放页面。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

我必须承认我不知道为什么会发生这种情况，但至少我找到了解决它的方法。

我认为我可以使用box-shadow: 0 0 0 1px black; 并删除边框，但这会以不同的方式缩放元素（而且 IE 在渲染薄框阴影方面非常糟糕，会产生比这更多的意外结果）。将外部 div 设置为 overflow: hidden; 并在内部使用绿色 box-shadow 来填补空白也不起作用，box-shadow 被切断了。甚至 flexbox 和浮动的东西也无济于事，而且这似乎不是盒子大小或行高的问题。

唯一有效的是将边框替换为outline: 1px solid black;

这也会对元素进行不同的缩放，但可以通过添加 1px 内边距 + box-shadow 方法来重新调整以填补空白：

.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;
}

【讨论】：