HTML5 仪表在 Firefox 中不显示值（在 Chrome 和 Edge 中正常）

Question

HTML5 仪表在 Firefox 中不显示值，但在 Chrome 和 Edge 中运行良好。

Chrome/Edge 中的外观：在标签右侧，我们可以看到下面的“48V”和“5A”

这是它在 Firefox 中的样子：我们看不到“48V”和“5A”

下面是我的简化/相关代码（不是生产代码）。

CSS代码：

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

meter::after {
    content: attr(value) " " attr(title);
    top:-22px;
    left:-50px;
    position: relative;
}

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

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

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="0" title="V"></meter>
            </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="0" title="A"></meter>
            </div>
        </div>
    </div>
    </status>

有人知道如何在 Firefox 中实现此功能吗？

我预计它可以在 Firefox 中运行。我不知道该尝试什么。结果如上所示。

Answer 1

仍在研究这个...再给我几分钟...

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

meter::after {
    content: attr(value) " " attr(title);
    position: absolute;
    top: 0;
    left: -50px;
}

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

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

 <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="0" title="V"></meter>
            </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="0" title="A"></meter>
            </div>
        </div>
    </div>
    </status>