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

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;
}