Safari浏览器下设置column-count后伪类样式失效问题求助

你遇到的是Safari的多列布局兼容性bug，代码本身逻辑没有问题。

问题原因 #

Safari在渲染column-count多列布局时，会默认裁剪列容器子元素的外部溢出内容。你的li伪元素使用了绝对定位+负left值，超出了li本身的盒模型范围，在多列场景下就被Safari判定为溢出内容直接不渲染，Firefox对这块的渲染逻辑更符合W3C标准，因此可以正常显示。

修复方案 #

你可以任选以下一种方案修复：

• 方案1：调整内边距预留伪元素位置，避免负定位溢出
  修改对应CSS即可：

.accord-mobile-data li {
  position: relative;
  /* 新增左内边距给圆点预留位置 */
  padding-left: 15px;
}

.accord-mobile-data li::before {
  content: "";
  color: #094CB2;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50px;
  position: absolute;
  background-color: #094CB2;
  /* 把原来的-15px改为0，圆点放在内边距区域内不会溢出 */
  left: 0;
  top: 4px;
}

• 方案2：不想改动原有定位逻辑的话，给多列容器添加GPU渲染触发属性，强制Safari正确渲染溢出内容：

.column-count {
  column-count: 2;
  /* 新增以下任意一行即可，优先选第一个 */
  transform: translateZ(0);
  /* 也可以用：overflow: visible; */
}

• 方案3：给li元素添加列内不拆分属性，也可解决部分场景的渲染异常：

.accord-mobile-data li {
  break-inside: avoid-column;
  position: relative;
}

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