IE11 中 div 之间的 1px 间距

Question

我正在显示一个 div，里面有 2 个 div。一个 div 具有彩色背景。它在 Firefox 和 Chrome 中运行良好，但在 Internet Explorer 11 中似乎存在差距。

我总是看不到差距，它会根据我放大的距离而变化。当我看到它并进一步放大时，它可能会再次消失。

这是我的代码：

.container {
  border: 1px solid;
  width: 500px;
  padding: 0px;
  position: relative;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
}
.left {
  background: #000000;
  width: 50%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
}
.right {
  margin-left:50%;
  padding:10px;
  
}

<div class="container">
  <div class="left"></div>
  <div class="right">hello</div>
</div>

这是 IE11 中有时会出现的差距：

Answer 1

试着给你的容器 box-sizing 属性

.container {
 box-sizing:border-box;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
}

它可能 box-sizing:content-box 从您的 css 中的某处继承而来。

IE11 中 div 之间的 1px 间距

1px gap between divs in IE11

html

css

internet-explorer-11