css - 你如何修复 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 专业版上使用 Chrome 61.0.3163.100(64 位)。我的笔记本电脑是 ThinkPad T540p。分辨率 1920x1080。屏幕上的 Windows 缩放设置为 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>