将鼠标悬停在进度条上会稍微移动它

Question

我使用以下方法创建了一个进度条：

<progress value="20" max="100"></progress>

对于悬停文本，我使用了以下 css：

progress[value] {
width: 1024px;
height: 20px;
border: none;
}
progress:hover::before {
display: block;
content: attr(value);
width: 100%;
text-align: center;
}

这里可以看到：jsFiddle

我知道这只适用于 Google Chrome，但没关系。

我的问题是，当我将鼠标悬停在进度条上时，它会向下移动几个像素。我在 css 中尝试了不同的边框样式，但没有任何运气。当我将鼠标悬停在进度条上时它会正确显示值，但我希望进度条保持原位...

有什么建议吗？

Answer 1

完成 display:block 问题就会消失

progress[value] {

  display: block;
}

将鼠标悬停在进度条上会稍微移动它

Hovering over a progress bar moves it slightly

html

css

google-chrome

progress-bar