为什么 Chrome 会在 Firefox 显示一条线的地方画两条线？答案

【问题标题】：Why does Chrome draw two lines where Firefox displays one?为什么 Chrome 会在 Firefox 显示一条线的地方画两条线？
【发布时间】：2018-06-22 16:20:50
【问题描述】：

我正在尝试制作一个响应式正方形网格，看起来类似于方格纸。我使用了一个预先准备好的解决方案，我试图将其用于我的目的。我的 HTML 代码如下所示（4*4 方格的示例网格）：

.square {
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;
}

.table {
  display: table;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;
}

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>

网格在 Firefox 中正常。但是当我在 Chrome 中查看它时，它在第二行和第三行之间（以及第二和第三列之间）显示两行而不是一行。我试图将 .square 背景色设置为黑色。它部分工作，但有问题的线看起来比其他线更粗。有面糊解决方案吗？

【问题讨论】：

请添加可运行代码sn-p。这将增加人们检查您的代码的机会。
似乎“瘦”在 Chrome 中表示 0.5px，但在 Firefox/Edge 中表示 1px。此外，您将宽度设置为25%，但容器（在这种情况下）不均分（在 sn-p 中它是605px 宽）。这会产生长度为151.25px 的正方形，这会导致在与实际像素对齐时出现舍入问题。也许试着把它放在你的容器上：background-image: linear-gradient(to bottom, transparent 99%, black 99%), linear-gradient(to right, transparent 99%, black 99%); background-size: 25%;
@c69 它现在就在那里（不感谢我）。很抱歉没有把它放在第一位。我对网站不是很熟悉。
@Niet the Dark Absol 你能澄清一下吗？我试过 .square { float:left;位置：相对；背景图像：线性渐变（到底部，透明 99%，黑色 99%）；背景图像：线性渐变（向右，透明 99%，黑色 99%）；背景大小：25%； } 而且没有网格。
Similar issue 在 Chrome 中由舍入值引起

标签： html css google-chrome firefox browser

【解决方案1】：

如果您从 .square 中删除 position: relative 并将高度添加到 .content 是否可以解决您的问题？

【讨论】：

【解决方案2】：

我猜你的问题是，你有display:table，因此你的桌子上有双边框。您可以在 .table 类中使用 border-collapse:collapse 解决此问题。

这是一个有效的小提琴，没有更多的粗线条，没有 chrome 中的双边框：https://jsfiddle.net/Hoargarth/kh7fyegk/

编辑：我忘了提一下，我还在小提琴内部将border: thin solid black; 更改为border: 1px solid black;，以删除chrome 中的粗线。

【讨论】：

你可以再次检查小提琴，因为我不小心在保存之前发布了小提琴，在我更改删除 Chrome 中的粗线之后。--编辑：现在我看到你提到的偶数/奇数数字。看起来像是 chrome 的渲染问题。
是的，这个解决方案没问题。谢谢一百万！

【解决方案3】：

在table 类中添加border-collapse: collapse;

       .square {    
        float:left;
        position: relative;
        width: 25%;
        padding-bottom : 25%;
        margin:0%;
        overflow:hidden;    
    }
    .content {
        position:absolute;
        height:100%; 
        width:100%;
        padding: 0%;
    }
    .table{
        display:table;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border-collapse: collapse;
    }
    .table-cell{
        display:table-cell;
        vertical-align:middle;
        height:100%;
        width:100%;
        padding: 0%;
        margin: 0%;
        border: thin solid black;
    }

 <div id="grid">
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell"></div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

对此没有适当的解决方案。似乎 Chrome 在 display: table 上舍入了宽度，但在 display: block 上却没有。标记的微小变化会产生一致的结果：

.square {
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  margin: 0%;
  overflow: hidden;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0%;
}

.table {
  /* removed display table */
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.table-cell {
  /* removed display table-cell */
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
  border: thin solid black;
  /* added */
  box-sizing: border-box;
}

<div id="grid">
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
  <div class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell"></div>
      </div>
    </div>
  </div>
</div>

【讨论】：