Firefox 59.0.2中嵌套CSS Columns的column-rule渲染异常求助

我完全懂你在Firefox 59.0.2 64位版本里碰到的这个糟心问题——用嵌套CSS Columns加column-rule做列间分隔线，结果分隔线居然跑到内容的上方和下方去了，这确实是旧版Firefox对column-rule渲染的一个小兼容性bug。

修复方案：用内层容器限制分隔线范围 #

旧版Firefox会把column-rule渲染到整个列容器的高度范围，而不是仅贴合内容区域。我们可以通过给列内容套一层内层容器，把列布局和分隔线样式移到内层容器上，让它紧密包裹内容，就能避免分隔线溢出。

示例代码对比

原来有问题的代码结构：

<div class="column-2">
  <img src="your-image.jpg" class="img-100">
  <p>这里是需要分栏的内容...</p>
</div>

.column-2 {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-rule: 1px solid #000;
  -moz-column-rule: 1px solid #000;
}
.header, .footer { 
  height: 50px; 
  width: 100%; 
  background-color: #ccc; 
  margin-bottom: 10px; 
} 
.img-100 { width: 100%; }

修改后的修复代码：

<div class="column-wrapper">
  <div class="column-2">
    <img src="your-image.jpg" class="img-100">
    <p>这里是需要分栏的内容...</p>
  </div>
</div>

.column-wrapper {
  /* 保留原外层容器的布局样式，比如margin等 */
  margin-bottom: 10px;
}
.column-2 {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-rule: 1px solid #000;
  -moz-column-rule: 1px solid #000;
  /* 关键：让内层容器紧密贴合内容高度 */
  display: inline-block;
  width: 100%;
}
.header, .footer { 
  height: 50px; 
  width: 100%; 
  background-color: #ccc; 
  margin-bottom: 10px; 
} 
.img-100 { width: 100%; }

原理说明 #

旧版Firefox中，块级元素的列容器会默认占满父容器宽度，渲染column-rule时错误地把分隔线延伸到了容器的上下空白区域。给内层列容器加上display: inline-block后，它会自动贴合内容的高度，column-rule就只会在内容的分栏之间显示，不会再溢出到内容的上下方了。

如果不想额外添加一层容器，也可以尝试给列容器设置height: fit-content，不过这个属性在旧版Firefox里兼容性稍弱，所以加内层容器的方法更稳妥可靠。

内容的提问来源于stack exchange，提问作者RaJesh RiJo