Firefox浏览器progress元素CSS读取data属性文本不显示问题求解

问题原因 #

Firefox 中 <progress> 属于规范定义的替换元素，本身不支持渲染 ::before/::after 伪元素，Chrome 是做了非标准兼容才支持你的原有写法，这是浏览器表现差异的根源。

兼容解决方案（全浏览器可用） #

最稳妥的方案是给进度条增加外层包裹容器，把伪元素挂载到容器上，无需修改原有业务逻辑，只需要调整HTML和CSS结构即可：

调整后HTML代码

<!-- 把后端返回的data-text属性移到外层容器上 -->
<div class="progress-wrap" data-text="488 Available of 500">
  <progress max="500" value="488" data-max-value="500"></progress>
</div>

调整后CSS代码

/* 外层容器做定位上下文 */
.progress-wrap {
  position: relative;
  display: inline-block;
  /* 根据布局需要可以调整为block等其他display值 */
}
progress {
  color: blue;
  height: 50px;
}
/* 伪元素挂载到外层容器上，所有浏览器都支持 */
.progress-wrap::before {
  content: attr(data-text);
  position: absolute;
  color: #fff;
  font-size: 15px;
  padding: 0 10px;
  top: 12%;
  left: 0;
  z-index: 1;
}

不改HTML结构的兼容方案 #

如果你无法修改后端输出的原有progress结构，可以用JS自动注入包裹层，兼容所有浏览器：

JS代码

document.querySelectorAll('progress[data-text]').forEach(progress => {
  // 自动创建包裹容器
  const wrap = document.createElement('div');
  wrap.className = 'progress-wrap';
  wrap.dataset.text = progress.dataset.text;
  // 替换DOM结构
  progress.parentNode.insertBefore(wrap, progress);
  wrap.appendChild(progress);
})

CSS代码和上面的方案一致即可。

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