我使用以下内容创建了一个进度条:
<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中尝试了不同的边框样式,但没有任何运气。当我将鼠标悬停在进度条上时,它会正确显示该值,但我希望进度条保持原位...
有什么建议吗?
答案 0 :(得分:1)
将其设为display:block
,问题应该消失
progress[value] {
display: block;
}