为什么Chrome会在Firefox中显示一行？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么Chrome会在Firefox中显示一行？相关的知识，希望对你有一定的参考价值。

我正在尝试制作响应方块的网格，这看起来类似于方形纸。我使用了预先准备好的解决方案，我试图将其用于我的目的。我的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背景颜色设置为黑色。它部分工作，但有问题的线看起来比其他线更厚。有面糊解决方案吗？

答案

对此没有适当的解决方案。似乎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>
另一答案

我想你的问题是，你有display:table，因此在yuor表中有双边框。您可以使用border-collapse:collapse类中的.table来解决这个问题。

这是一个工作小提琴，没​​有更多的线条，没有双边界的铬：https://jsfiddle.net/Hoargarth/kh7fyegk/

编辑：我忘了提到，我也改变了border: thin solid black;到小提琴里面的border: 1px solid black;，去除了铬的粗线。

另一答案

在border-collapse: collapse;课程中添加table

       .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>
 
以上是关于为什么Chrome会在Firefox中显示一行？的主要内容，如果未能解决你的问题，请参考以下文章
 

 为啥 Chrome 和 Firefox 显示不同的 flex 布局结果？


 复选框点击事件会中断以运行代码，但$ .trigger（'click'）只会在Chrome中识别，而不会在Firefox中识别。为什么？


 为啥我的 SVG 在 Chrome 而不是 Firefox 中正确显示？


 导航栏中的 Twitter Bootstrap 搜索框在 chrome 和 firefox 中呈现不同


 Chrome 和 Firefox 中的 UL 余量过大


 菜单在 Chrome 中正确显示，但在 Firefox 中不显示