带有显示table-cell css属性的元素内的“cover”背景上的Srange边框 - chrome

Question

我在chrome中的某些分辨率的列上看到1px边框/间隙：

Firefox btw没有差距。

.row.equalize {
  display: table;
  width: 100%;
  margin: 0;
}
.equalize [class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: middle;
  height: 400px;
}

<div class="row equalize">
  <div class="col-sm-6 col-sm-push-6 wt-bg-two"></div>
  <!--div with bg image -->
  <div class="col-sm-6 col-sm-pull-6 c-dark-blue">
    <div class="inner text-right">
      <h3>Some Title</h3>
      <p>some paragraph text</p>
    </div>
  </div>
</div>

更新： 这是fiddle

只需在Chrome / Win中打开它 - 调整结果框的大小直到框并排 - 我想要显示的最佳示例可以在第2行查看 - 在某些帧宽度上出现1px间隙。< / p>

重要： 包括“flex”解决方案在内的答案将不被接受，thx

Answer 1

看起来这是由Bootstrap尝试通过col-sm-6类分割50/50的奇数像素引起的。有关特定于浏览器的详细信息，请参阅What happens to the remaining 1px when a div with an odd width is split 50%/50%?。