Chrome和Firefox中仪表元素的边框
提问于 2016-11-22 07:07:10
在尝试对HTML5 meter元素进行样式设计时，我注意到Chrome呈现边框的方式与Firefox不同。实际上，它完全忽略了颜色。
meter {
width: 400px;
height: 50px;
background: #ccc;
border: 5px solid #f00;
}
meter::-webkit-meter-bar {
background: #ccc;
}
meter::-webkit-meter-optimum-value {
background: #0a0;
}
meter::-moz-meter-bar {
background: #0a0;
}<meter value="50" min="0" max="100">
向-webkit-meter-bar添加边框在Chrome中的工作原理是一样的，但如果我向meter (用于火狐)和-webkit-meter-bar (用于Chrome)添加一个边框，则该元素在Chrome中将有一个双边框。
为什么Chrome忽略边框的颜色，是否有一种方法可以使meter的样式在Chrome和Firefox中看起来相同，除非使用带有自己边框的包装？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-22 07:27:22
这里您唯一的选择是在firefox和chrome ( firefox中的边框，在chrome中没有边框)中给出不同的样式，并使用-webkit-meter-bar在chrome中设置边框。
您可以使用@-moz-document url-prefix()黑客来完成以下操作：
@-moz-document url-prefix() {
meter {
border: 5px solid #f00;
}
}下面是一个示例：
meter {
width: 400px;
height: 50px;
background: #ccc;
}
@-moz-document url-prefix() {
meter {
border: 5px solid #f00;
}
}
meter::-webkit-meter-bar {
background: #ccc;
border: 5px solid #f00;
}
meter::-moz-meter-bar {
background: #0a0;
}
meter::-webkit-meter-optimum-value {
background: #0a0;
}<meter value="50" min="0" max="100"></meter>
Stack Overflow用户
发布于 2016-11-22 07:13:43
由于meter是一个相对较新的元素，因此跨浏览器进行类似的结果需要时间。
但是，您可以尝试设置box-shadow: 0px 0px 0px 10px #000;第四个属性设置阴影展开(在本例中为边框大小)。第五个属性是颜色。
缺点是没有边框样式，只有坚实的边框
片段：
meter {
width: 400px;
height: 50px;
padding:0;
border: 5px solid #f00;
}
meter::-webkit-meter-bar {
background: #ccc;
}
meter::-webkit-meter-optimum-value {
background: #0a0;
}
meter::-moz-meter-bar {
background: #0a0;
}
meter{
box-shadow:0px 0px 0px 5px #f00;
}<meter value="50" min="0" max="100">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40745297
复制相关文章
腾讯云开发者
