Chrome中CSS :before元素消失，Firefox显示正常的原因排查求助

Hey，我来帮你搞定这个跨浏览器渲染的小问题！从你给出的代码来看，Chrome无法显示:before元素大概率是因为浏览器对绝对定位伪元素的渲染细节处理不同，下面是具体的原因分析和修复方案：

可能的问题点与解决办法 #

• 多余的display属性引发冲突：你给:before设置了display: inline-block，但绝对定位的元素会自动触发块级渲染行为，这个属性不仅多余，还可能在Chrome中导致渲染异常。直接删掉这个属性就好。
• margin定位的浏览器差异：Chrome和Firefox对绝对定位元素的margin计算逻辑有细微差别，用margin-left和margin-top来定位伪元素很容易出现兼容性问题。换成left和top属性来控制位置会更可靠，毕竟绝对定位元素本来就应该用这些偏移属性来定位。
• 父容器溢出裁剪（潜在问题）：如果.control-2的父元素设置了overflow: hidden，Chrome可能会把向左偏移的:before元素裁剪掉，而Firefox的处理会更宽松。可以检查一下父元素的overflow属性，必要时调整为overflow: visible或者调整伪元素的定位值。

修改后的代码示例 #

CSS代码 #

div.control-2 { 
  position: absolute; 
  margin-top: 70px; 
  margin-left: 146px; 
}
div.control-2:before { 
  position: absolute; 
  content: ''; 
  width: 10px; 
  height: 1px; 
  background: rgba(0,0,0,0.8); 
  left: -40px; /* 替换margin-left，直接设置左侧偏移 */
  top: 10px; /* 替换margin-top，直接设置顶部偏移 */
  box-shadow:0 1px 1px rgba(255,255,255,0.15), 0 60px 0 rgba(0,0,0,0.8), 0 61px 1px rgba(255,255,255,0.15), 0 120px 0 rgba(0,0,0,0.8), 0 121px 1px rgba(255,255,255,0.15), 0 180px 0 rgba(0,0,0,0.8), 0 181px 1px rgba(255,255,255,0.15); 
}

HTML代码 #

<div class="control-2">Html Content</div>

按照上面的修改，Chrome应该就能正常显示:before元素了，而且这种写法在其他浏览器里的兼容性也会更好～

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