html - 显示 HTML5 进度条的内部文本?未实现的技术原因?

标签 html

在 MDN 上 documentation for <progress> ,他们提供了这个例子:

<progress value="70" max="100">70 %</progress>

该元素包含70 %的文本节点,但它不会显示在任何地方。我对两件事很好奇。首先是,是否有办法显示它。 (也许一些默认的 CSS 阻止了这个?请注意,我不是在寻找任何需要定位其他元素的技巧。这个问题与 Stack Overflow 上的其他问题不同,因为我很好奇是否有显示该文本的正确方法。)

对于第二个问题,我假设没有解决方法是不可能的。我很好奇为什么会这样。 The spec声称 <progress>元素可以有短语内容。该元素需要一个开始和结束标记。它似乎清楚地设置为包含内容。阻止显示此内容的技术原因是什么?

最佳答案

关于你的第二个问题,我在规范中找到了这个

Authors are encouraged to also include the current value and the maximum value inline as text inside the element, so that the progress is made available to users of legacy user agents.

在 progress 标签中包含文本有点像在 canvas 标签中包含文本,它只是为了支持旧版浏览器。我猜它默认隐藏的原因是因为人们认为如果浏览器确实支持进度标签,那么就不需要显示里面的文本。

关于你的第一个问题,我真的很困惑。我做了一个fiddle在这里,我将 p 标记中的所有计算样式属性复制到 progress 标记中。除了更改进度条的外观外,它似乎没有对隐藏的文本节点做任何事情,这让我觉得浏览器直接忽略它并且它不是任何默认的 css。

关于html - 显示 HTML5 进度条的内部文本?未实现的技术原因?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55804548/

相关文章:

javascript - jquery 克隆日期选择器不工作

html - 'display: block; float: left' 与 'display: inline-block; float: left' 之间的区别?

HTML/CSS - 使用图像作为输入类型=文件

javascript - 如何禁用下拉字段编辑但保留其中的值

javascript - "rotating"/从文本文档javascript切换文本?

javascript - 使用 jquery/css/html 在 div 标签中显示真实大小的图像

html - 如何在flexbox中让div不收缩,而其他的增长收缩

html - 如何使图片像按钮一样

javascript - 将 JS 函数和事件监听器应用于多个 html 元素

html - 限制 Bootstrap 页面的总宽度?