鉴于html
<meter value="0.55" high="0.999" optimum="1"> <span class="meter-value">0.5491</span> </meter>
我希望在仪表顶部显示文字0.5491.我尝试使用常用的CSS技术设置文本样式,但它根本不显示.在检查员中,无论我说多少,都说宽度和高度都是0
.meter-value {
display: block; width: 50px; height: 20px;
}
我做了更多尝试,这些例子都是简化的.我使用Firefox进行测试,兼容性并不紧迫(内部项目).
我更喜欢“丑陋的hss”解决方案之上的“丑陋的CSS”解决方案.
更新:(总结一些评论)
似乎有一些魔力使得来自米的内容在Firefox中不可见(包括来自米:: after,米跨度:: after和simillar组件的内容).所以问题是如果有一个css可以覆盖它.设置宽度,高度和能见度没有帮助.
解决方法
使用CSS3的:: after并将其添加到meter标签,如下所示.
meter::after {
content : "0.5491";
}
更新
由于OP说他想要多个元素,所以更新了代码.将位置从绝对更改为相对,因此文本将始终相对于仪表
为了使它出现在仪表上,使用position：absolute来设置样式,并按如下方式给出top或margin-top-left
meter{
width:100px;
}
meter::after {
content : attr(value);
top:-17px;
left:40px;
position:relative;
}
有关:: after,访问MDN的更多参考
同样使用它,您可以删除span元素.
试试下面的代码片段
meter{
width:100px;
}
meter::after {
content : attr(value);
top:-17px;
left:40px;
position:relative;
}
<meter value="0.55" high="0.999" optimum="1"> </meter> <meter value="0.45" high="0.999" optimum="1"> </meter> <meter value="0.85" high="0.999" optimum="1"> </meter> <meter value="0.95" high="0.999" optimum="1"> </meter> <br /> <meter value="0.55" high="0.999" optimum="1"> </meter> <meter value="0.45" high="0.999" optimum="1"> </meter> <meter value="0.85" high="0.999" optimum="1"> </meter> <meter value="0.95" high="0.999" optimum="1"> </meter>
上面的代码不适用于Firefox.这是一个已知的问题,:: after和::之前的伪作用仅适用于webkit浏览器.
对于firefox,请尝试以下代码(这是全局的.它适用于所有浏览器)
meter{
width:100px;
}
span{
}
span::after {
content : attr(data-value);
top:0px;
left:-70px;
position:relative;
}
<meter value="0.55" high="0.999" optimum="1"> </meter> <span data-value="0.55"></span> <meter value="0.45" high="0.999" optimum="1"> </meter> <span data-value="0.45"></span> <br /> <meter value="0.55" high="0.999" optimum="1"> </meter> <span data-value="0.55"></span> <meter value="0.45" high="0.999" optimum="1"> </meter> <span data-value="0.45"></span>
