html - 用于 mozilla 和 safari 的样式表栏

Question

我在我的 meter-bar 上使用了以下 css，但不知何故样式在 safari 上不起作用(见下面的屏幕截图)。我对 css 很陌生，并复制到 css 下面。根据评论，这应该适用于所有浏览器。

eacda3:黄金

607d8b:深绿色

HTML:

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

CSS: 仪表 { 高度:20px； 宽度: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 之间的比较，右边应该是这样。所有元素都在显示，但颜色和边框半径在前两个上不起作用。

Answer 1

添加以下内容对我有用:

*::-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 也因此得到了修复