Chrome显示双线而Firefox显示单线的响应式方格网格问题求解

嘿，我太懂你这种浏览器渲染差异的烦恼了——Firefox显示正常，Chrome却在行列之间出现双线，用background-color凑活还导致线条变粗，确实闹心。咱们来看看几个靠谱的解决方案：

方案一：用CSS Grid重构（最推荐） #

现在CSS Grid就是专门为网格布局设计的，比float的老方案简洁太多，还能完美解决边框叠加的问题。

代码示例： #

CSS部分：

#grid {
  display: grid;
  /* 4列，每列平分宽度，响应式自动适配 */
  grid-template-columns: repeat(4, 1fr);
  /* 去掉网格间隙，避免额外空白 */
  gap: 0;
}

.grid-item {
  /* 只给每个单元格加右侧和底部边框 */
  border-right: thin solid black;
  border-bottom: thin solid black;
  /* 让单元格占满网格空间 */
  height: 100%;
}

/* 给第一列的单元格加左侧边框 */
#grid .grid-item:nth-child(4n+1) {
  border-left: thin solid black;
}

/* 给第一行的单元格加顶部边框 */
#grid .grid-item:nth-child(-n+4) {
  border-top: thin solid black;
}

HTML部分（简化超多！）：

<div id="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

为什么好用？

• 完全避免了相邻边框叠加的问题，每个边框只渲染一次
• HTML结构大幅简化，不用嵌套多层div
• 响应式更省心，1fr会自动平分容器宽度，想改行列数只需要调整repeat()里的数字就行

方案二：改进原有的float布局 #

如果不想重构代码，也可以调整原有的CSS逻辑，让边框不叠加：

.square { 
  float: left; 
  position: relative; 
  width: 25%; 
  padding-bottom: 25%; 
  margin: 0%; 
  overflow: hidden; 
  box-sizing: border-box; /* 确保宽度计算包含内边距和边框 */
}
.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-right: thin solid black;
  border-bottom: thin solid black;
}

/* 给第一列的单元格补左侧边框 */
.square:nth-child(4n+1) .table-cell {
  border-left: thin solid black;
}

/* 给第一行的单元格补顶部边框 */
.square:nth-child(-n+4) .table-cell {
  border-top: thin solid black;
}

这个思路就是让每个边框只出现在需要的位置，不会让相邻元素的边框叠在一起，Chrome和Firefox就能渲染一致了。

方案三：用box-shadow替代border（小技巧） #

还有个取巧的方式，用box-shadow代替border，因为box-shadow不会像border那样叠加：

#grid {
  /* 给容器补左上角的阴影，避免缺口 */
  box-shadow: -1px -1px 0 0 black;
  overflow: hidden;
}

.table-cell {
  /* 去掉原来的border，用阴影模拟边框 */
  box-shadow: 1px 1px 0 0 black;
  /* 其他原有样式保留 */
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
  padding: 0%;
  margin: 0%;
}

不过这个方式不如前两种直观，适合不想大改代码的临时场景。

总的来说，最推荐用CSS Grid，毕竟是现代布局方案，后续维护和扩展都方便得多。

内容的提问来源于stack exchange，提问作者Radek John