Styling meter-bar for mozilla and safari

Question

Я использую следующие css на своих метрических барах, но каким-то образом стиль сафари не работает (см. Ниже скриншоты). Я довольно новичок в 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); 
} 

Edit: скриншот является сравнение между Mozilla и Safari (слева) и Chrome, так, как это должно выглядеть справа. Все элементы отображаются, но цвета и рамки не работают на первых двух.

Answer 1

Похож на суетливый элемент. Просто оберните div вокруг него (в этом случае я назвал его «.meter») и применил к нему свойства границы с переполнением: скрытым. Затем сопоставьте высоту родительского контейнера с метром.

.meter { 
    display: inline-block; 
    height: 20px; 
    overflow: hidden; 
    border: 2px solid #485563; 
    -moz-border-radius: 10px; 
    /*Firefox*/ 
    -webkit-border-radius: 10px; 
    /*Safari, Chrome*/ 
    border-radius: 10px; 
} 
.meter meter { 
    height: 20px; 
} 
.meter meter:-webkit-meter-bar { 
    background: #607d8b; 
} 
.meter meter:-webkit-meter-optimum-value { 
    border: 2px solid #000; 
    -moz-border-radius: 10px; 
    /*Firefox*/ 
    -webkit-border-radius: 10px; 
    /*Safari, Chrome*/ 
    background: #eacda3 !important; 
    /* 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); 
} 

Answer 2

Добавление следующие работал для меня:

*::-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, и сафари также каким-то образом фиксироваться этим