IE11中div之间的差距为1px

Question

我正在显示一个包含2个div的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;
}

可能会从你css的某个地方继承box-sizing:content-box。