Bootstrap 4 图像网格 - Chrome 和 Safari 中的行之间的白线

Question

我在 Bootstrap 4 中制作了以下网格：

<div class="container-fluid">
  <div class="row padding">
    <div id="workshop1" class="col-lg-6 nopadding">
      <img src="images/Werkstatt/image_05.jpg" class="img-fluid nopadding" alt="">
    </div>

    <div class="col-lg-6">
      <div class="row">
        <div id="workshop2" class="col-lg-6 nopadding">
          <img src="images/Werkstatt/image_06.jpg" class="img-fluid nopadding" alt="">
        </div>

        <div id="workshop3" class="col-lg-6 nopadding">
          <img src="images/Werkstatt/image_08.jpg" class="img-fluid nopadding" alt="">
        </div>
      </div>

      <div class="row">
        <div id="workshop4" class="col-lg-6 nopadding">
          <img src="images/Werkstatt/image_09.jpg" class="img-fluid nopadding" alt="">
        </div>

        <div id="workshop5" class="col-lg-6 nopadding">
          <img src="images/Werkstatt/image_07.jpg" class="img-fluid nopadding" alt="">
        </div>
      </div>
    </div>
  </div> <!-- end of first row -->

  <div class="row padding">
    <div id="workshop6" class="col-lg-3 nopadding">
      <img src="images/Werkstatt/image_01.jpg" class="img-fluid nopadding" alt="">
    </div>
    <div id="workshop7" class="col-lg-3 nopadding">
      <img src="images/Werkstatt/image_04.jpg" class="img-fluid nopadding" alt="">
    </div>
    <div id="workshop8" class="col-lg-3 nopadding">
      <img src="images/Werkstatt/image_02.jpg" class="img-fluid nopadding" alt="">
    </div>
    <div id="workshop9" class="col-lg-3 nopadding">
      <img src="images/Werkstatt/image_03.jpg" class="img-fluid nopadding" alt="">
    </div>
  </div> <!-- end of second row -->
</div>

css 文件如下所示：

.nopadding {
  padding-left: 0;
  padding-right: 0;
}

现在我遇到了问题，在我的 Mac 上的 Safari 和 Chrome 中，第 2 行的右侧和第 3 行之间有一条小白线。在 Firefox 中一切看起来都很好：

火狐

Chrome 和 Safari

有人知道如何解决这个问题吗？所有浏览器都是最新的。

提前致谢。

问候 拉尔斯

Answer 1

尝试将display: block; 添加到您的图片或float: left;

有时尝试font-size: 0; 或line-height: 0; 有效。