Question

在MDN documentation for <progress>上，他们提供了以下示例：

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

此元素包含70 %的文本节点，但不会在任何地方显示。我对两件事感到好奇。首先是，如果有一种显示方式。（也许某些默认的CSS阻止了这种情况？请注意，我并不是在寻找需要定位其他元素的hack。这个问题与Stack Overflow上的其他问题不同，因为我很好奇是否存在显示该文本的正确方法。）

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

Answer 1

对于您的第二个问题，我在规格中找到了

鼓励作者在元素内以文本形式内嵌当前值和最大值，以便使旧用户代理的用户可以使用该进度。

看来，在progress标签内包含文本有点像在canvas标签内包含文本，并且它仅用于旧版浏览器支持。我猜它默认为隐藏的原因是因为人们认为，如果浏览器确实支持progress标签，则不需要显示其中的文本。

关于你的第一个问题，我真的感到困惑。我在此处进行了fiddle的复制，将所有计算出的样式属性从p标记复制到progress标记。除了更改进度条的外观外，它似乎对隐藏的文本节点没有任何作用，这使我认为浏览器直接将其忽略，并且它不是默认的CSS。