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

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

我知道这只适用于谷歌浏览器，但没关系。

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

有什么建议吗？

Answer 1

设为display:block，问题就会消失

progress[value] {

  display: block;
}