Mozilla和Safari的仪表杆样式 [英] Styling meter-bar for mozilla and safari

问题描述

我在仪表盘上使用了以下CSS，但是以某种方式在Safari中无法使用样式(请参见下面的屏幕截图).我对CSS很陌生，并复制到CSS下方.根据评论，这应该在所有浏览器上都可以使用.

I am using the following css on my meter-bars but somehow the styling does not work on safari (see below screenshots). I am pretty new to css and copied below css. According to the commenting this should work on all browsers.

HTML:

<meter min="0" value="<%=info["home_prob"]%>" max="100" id ='H<%=id%>'>
    </meter> <span> <%=info["home_prob"]%>%</span></p>

CSS: 仪表 { 高度:20px； 宽度:80％; }

CSS: meter { height: 20px; width: 80%; }

meter::-webkit-meter-bar {
    background: #607d8b;
    border: 4px solid #485563;
    border-radius: 9px;
}

meter::-webkit-meter-optimum-value {
    border-radius: 9px;
    background: #eacda3; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #eacda3 , #d6ae7b); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #eacda3 , #d6ae7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d4e6', endColorstr='#6bb4d1',GradientType=0);
}

屏幕快照是Mozilla和Safari(左)与Chrome之间的比较，它的显示方式应该在右边.所有元素都在显示，但是颜色和边框半径在前两个元素上不起作用.

the screenshot is the comparison between Mozilla and Safari (left) and Chrome, the way it is supposed to look on the right. All elements are showing but the colors and border radis do not work on the first two.

推荐答案

添加以下内容对我有用:

Adding the following worked for me:

*::-moz-meter-bar {
    -moz-appearance: meterchunk;
    display: inline-block !important;
    float: none !important;
    position: static !important;
    width: 100%;
    height: 12px;
    overflow: visible !important;
    background: #607d8b;
    border: 4px solid #485563;
}
:-moz-meter-optimum::-moz-meter-bar {
    background: linear-gradient(to left, #eacda3 , #d6ae7b);
    border-radius: 9px;
}

此CSS适用于Mozilla，而Safari也由此得以解决

This CSS works for Mozilla, and safari also somehow got fixed by this

这篇关于Mozilla和Safari的仪表杆样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！