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

时间：2018-01-13 11:01:54

标签： html css google-chrome firefox browser

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

4 个答案:

答案 0 :(得分：1)

我想你的问题是，你有display:table因此在yuor表中有双边框。您可以在border-collapse:collapse课程中使用.table修复此问题。

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

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

答案 1 :(得分：1)

在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>
            </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>

答案 2 :(得分：1)

没有适当的解决方案。似乎Chrome会在display: table上舍入宽度，但不会在display: block上舍入。标记的轻微更改会产生一致的结果：

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

答案 3 :(得分：0)

如果从.square删除位置：relative并将高度添加到.content会解决您的问题吗？

相关问题
最新问题