为啥 Chrome 会在 Firefox 显示一条线的地方画两条线？

Posted 2023-03-06

【中文标题】为啥 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 中由舍入值引起

【参考方案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>