html - 具有显示表格单元格 css 属性的元素内 "cover"背景上的奇怪边框 - Chrome

Question

我在 chrome 的某些分辨率下看到列之间有 1px 的边框/间隙:

顺便说一下，在 Firefox 中没有差距。

.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 中打开它 - 调整结果框架的大小直到框并排 - 我试图展示的最佳示例可以在第二行中查看 - 在某些框架宽度上出现 1px 间隙。

重要提示: 不接受包含“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%?特定于浏览器的详细信息。