<meter value="0.55" high="0.999" optimum="1"> <span >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,访问@L_419_0@的更多参考
同样使用它,您可以删除span元素.
在这里,我们在CSS中使用attr()函数.在MDN阅读它
试试下面的代码片段
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>总结
以上是内存溢出为你收集整理的html – 如何使标签中的文本在仪表上可见全部内容,希望文章能够帮你解决html – 如何使标签中的文本在仪表上可见所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)