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

时间：2017-11-03 09:53:44

标签： css google-chrome rendering

有时我在Chrome中奇怪的边距不会出现在任何其他浏览器中，并且只能在某些缩放级别上体验 （实际上我不会＆＃ 39;不知道它们是什么，它们不是必要的边缘，它不能仅仅通过看到CSS来解释。

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

enter image description here

或者如果你喜欢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-Scaling设置为125％（这似乎只影响发生错误的浏览器的缩放级别。）

1 个答案:

答案 0 :(得分：0)

＆＃39; {}＆＃39; .progress-bar {中的错误   background-color：＃375D81;   跨度 {} }

并添加身高：自动;在.progress-bar类

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题