你如何修复 Chrome 中奇怪的边距？

Question

有时我在 Chrome 中确实有 奇怪的边距，这些边距不会出现在任何其他浏览器中，并且只能在 某些缩放级别上体验（实际上我不知道它们是什么，它们不是必需的边距，仅从 CSS 中无法真正解释）。

举个例子，我这​​里有这个，进度条底部有一条小白线，它不应该在那里。在这种情况下，它们出现在 100% 的缩放级别上，这使得它特别烦人：

或者如果你喜欢 JSFiddle： https://jsfiddle.net/JakeTheDog/3muvv1Lx/1/

HTML：

<table>
  <thead>
    <th class="text-center">Column 1</th>
    <th class="text-center">Column 2</th>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="text-center">
        <div class="progress">
          <div class="progress-bar" style="width:75%;"><span class="progress-bar-tooltip my-progress-bar-tooltip">75.1%</span></div>
        </div>
        <!--<span>Gut- (2.30)</span>-->
      </td>
      <td class="text-center">
        <div class="progress">
          <div class="progress-bar" style="width:77.8%;"><span class="progress-bar-tooltip my-progress-bar-tooltip">77.8%</span></div>
        </div>
        <!--<span>Gut- (2,3)</span>-->
      </td>
    </tr>
  </tbody>
</table>

CSS：

.progress {
  border-radius: 0 !important;
  background-color: white;
  border: solid 1px #375D81;
  margin: 0;
}

.progress-bar {
  background-color: #375D81;
  span {}
}

td{
  vertical-align: middle !important;
  padding: 20px;
  width: 300px;
}

但是，这有点问题，因为它似乎也与屏幕分辨率有关。我的笔记本电脑屏幕上有这条线，但在我也连接到笔记本电脑的更大屏幕上没有。 不过，如果您使用浏览器的缩放功能，您应该能够得到奇怪的线条。

我只在 Chrome 中遇到这个问题。我从未在任何其他浏览器中看到过这种情况。那么这是一个 Chrome 错误吗？有没有办法防止这些线的出现？

编辑：我在 Windows 10 Pro 上使用 Chrome 61.0.3163.100（64 位）。我的笔记本电脑是 ThinkPad T540p。分辨率 1920x1080。屏幕上的 Windows-Scaling 设置为 125%（这似乎只影响出现错误的浏览器的缩放级别）。

Answer 1

.progress-bar { 中的

'{}' 错误 背景颜色：#375D81； 跨度 {} }

并添加高度：自动；在 .progress-bar 类中

.progress {
  border-radius: 0 !important;
  background-color: white;
  border: solid 1px #375D81;
  margin: 0;
  padding: 0;
}

.progress-bar {
  background-color: #375D81;
  height:auto;
 }


td{
  vertical-align: middle !important;
  padding: 20px;
  width: 300px;
}

<table>
  <thead>
    <th class="text-center">Column 1</th>
    <th class="text-center">Column 2</th>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="text-center">
        <div class="progress">
          <div class="progress-bar" style="width:75%;"><span class="progress-bar-tooltip my-progress-bar-tooltip">75.1%</span></div>
        </div>
        <!--<span>Gut- (2.30)</span>-->
      </td>
      <td class="text-center">
        <div class="progress">
          <div class="progress-bar" style="width:77.8%;"><span class="progress-bar-tooltip my-progress-bar-tooltip">77.8%</span></div>
        </div>
        <!--<span>Gut- (2,3)</span>-->
      </td>
    </tr>
  </tbody>
</table>