如何在HTML5进度条内显示数据标签跨浏览器兼容？

Question

我有一个样式化的HTML5进度条，我想在其中显示进度条跨浏览器兼容的数据标签。目前它显示在进度条上方。

HTML：

<progress max="100" value="50" data-label="50% Complete"></progress>

CSS：

progress
{
  text-align:center;
  height: 1.5em;
  width: 100%;

  -webkit-appearance: none;
  border: none;
}

progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0
}

progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}

progress::-webkit-progress-value {
  background-color: #7cc4ff;
}

progress::-moz-progress-bar
{
  background-color: #7cc4ff;
}

我得到以下结果（见图），但我想在进度条中移动数据标签：

非常感谢您的建议。

Answer 1

TL; DR：不要在<progress>元素上使用伪元素。

正如其他答案和me in the comments所述，HTML / CSS进度条比使用<progress>元素更好。

基于Gecko的浏览器，如firefox，根本不会显示伪元素。

但是，要回答您的问题，只需将文本放在进度条上：

progress {
  text-align: center;
  height: 1.5em;
  width: 100%;
  -webkit-appearance: none;
  border: none;
  
  /* Set the progressbar to relative */
  position:relative;
}
progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  vertical-align: 0;
  
  /*Position text over the progress bar */
  position:absolute;
  left:0;
  right:0;
}
progress::-webkit-progress-bar {
  background-color: #c9c9c9;
}
progress::-webkit-progress-value {
  background-color: #7cc4ff;
}
progress::-moz-progress-bar {
  background-color: #7cc4ff;
}

<progress max="100" value="50" data-label="50% Complete"></progress>

请注意，不具有良好的浏览器支持（事实上，它非常糟糕），因为<progress>是replaced element，如<input>。

CSS规范并不完全清楚替换元素是否可以具有伪元素，因此不同的浏览器具有不同的渲染。基于Webkit的浏览器（例如Chrome）有时会显示它们。基于Gecko的，如Firefox，不会。

有关类似问题，请参阅this answer。

因此，如果这是针对某个网站，而不是electron应用或类似内容，我高度建议使用HTML / CSS进度条：

.progress {
  height: 1.5em;
  width: 100%;
  background-color: #c9c9c9;
  position: relative;
}
.progress:before {
  content: attr(data-label);
  font-size: 0.8em;
  position: absolute;
  text-align: center;
  top: 5px;
  left: 0;
  right: 0;
}
.progress .value {
  background-color: #7cc4ff;
  display: inline-block;
  height: 100%;
}

<div class="progress" data-label="50% Complete">
  <span class="value" style="width:50%;"></span>
</div>

注意：即使这是针对具有基于webkit的浏览器的应用程序，您仍然不应该在<progress>上使用psuedo元素。正如我上面所说，这个功能的规格还不清楚，将来可能会改变，打破你的进步元素。 Webkit也可以放弃对此的支持。

我建议只使用HTML / CSS进度条，以后将为您节省很多麻烦。

Answer 2

您需要做的就是在状态文本元素上将状态文本设置为z-index的{​​{1}}为1（-1无效，0为默认值），然后设置否定的{{ 1}}（对于margin-top: -32px），您可以保留height: 32px元素，而无需添加任何多余元素：

progress