HTML5 meter在Firefox中不显示值，Chrome/Edge正常，求解决方法

问题背景 #

Chrome/Edge中，meter组件右侧能正常显示48V、5A这类数值（通过::after伪元素读取value和title属性生成）；但Firefox中完全看不到这些数值，核心原因是Firefox不支持给<meter>原生控件使用::after伪元素生成内容，属于浏览器兼容性差异问题。

解决方案 #

放弃依赖meter的伪元素，改用独立元素承载数值，以下提供两种可行方案：

方案一：静态HTML结构调整（适合固定数值场景）

直接在meter旁新增一个<span>元素用于显示数值，通过CSS定位匹配原布局：

<status class="lbl-group">
  <div id="status">
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_volt">Battery Voltage</label>
        <meter id="batt_volt" min="0" low="0" high="50" max="53" optimum="48" value="48" title="V"></meter>
        <span class="meter-value">48 V</span>
      </div>
    </div>
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_curr">Battery Current</label>
        <meter id="batt_curr" min="0" low="0" high="10" max="13" optimum="5" value="5" title="A"></meter>
        <span class="meter-value">5 A</span>
      </div>
    </div>
  </div>
</status>

对应的CSS调整：

meter {
  justify-content: right;
  width: 135px;
  height: 22px;
}

/* 移除原meter::after样式 */

.c_meter {
  position: relative;
  display: block;
  line-height: 22px;
  font-size: 16px;
  height: 22px;
}

.c_meter meter {
  position: absolute;
  left: 190px;
}

/* 定位数值元素，对齐原伪元素位置 */
.c_meter .meter-value {
  position: absolute;
  left: calc(190px + 135px - 50px);
  top: 0;
}

方案二：JavaScript动态同步（适合实时更新场景）

如果数值需要动态变化（比如监控实时电池数据），用JS自动同步meter的value和title属性到显示元素：

HTML结构（保留空的数值元素）：

<status class="lbl-group">
  <div id="status">
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_volt">Battery Voltage</label>
        <meter id="batt_volt" min="0" low="0" high="50" max="53" optimum="48" value="48" title="V"></meter>
        <span class="meter-value"></span>
      </div>
    </div>
    <div class="output-group" id="batt-group">
      <div class="c_meter">
        <label for="batt_curr">Battery Current</label>
        <meter id="batt_curr" min="0" low="0" high="10" max="13" optimum="5" value="5" title="A"></meter>
        <span class="meter-value"></span>
      </div>
    </div>
  </div>
</status>

JavaScript代码：

// 同步单个meter的数值
function updateMeterValue(meterElement) {
  const valueSpan = meterElement.nextElementSibling;
  if (valueSpan) {
    valueSpan.textContent = `${meterElement.value} ${meterElement.title}`;
  }
}

// 初始化所有meter数值
document.querySelectorAll('meter').forEach(meter => {
  updateMeterValue(meter);
  // 监听value变化，实时更新
  meter.addEventListener('change', () => updateMeterValue(meter));
});

补充说明 #

Firefox对<input>、<meter>这类原生表单控件的伪元素支持存在局限，浏览器有独立的渲染逻辑，伪元素无法生效。改用独立元素承载内容是跨浏览器兼容的最稳妥方案，两种方案都能保持原布局的显示效果。

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