Barre de mesure de style pour mozilla et safari

Question

J'utilise les css suivants sur mes barres de mesure, mais d'une façon ou d'une autre, le style ne fonctionne pas en safari (voir les captures d'écran ci-dessous). Je suis assez nouveau à css et copié ci-dessous css. Selon les commentaires, cela devrait fonctionner sur tous les navigateurs.

eacda3: or

607d8b: vert foncé

HTML:

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

CSS: { mètres hauteur: 20px; largeur: 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: la capture d'écran est la comparaison entre Mozilla et Safari (à gauche) et Chrome, la façon dont il est censé regarder à droite. Tous les éléments sont visibles mais les couleurs et les radis de bordure ne fonctionnent pas sur les deux premiers.

Answer 1

On dirait un élément difficile. Il suffit d'envelopper un div autour (dans ce cas, je l'ai appelé ".meter"), et d'appliquer les propriétés de la frontière à cela, avec un débordement: caché. Puis faites correspondre la hauteur du conteneur parent avec le compteur.

.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

qui suit a fonctionné pour moi:

*::-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; 
} 

Ce CSS fonctionne pour Mozilla et Safari aussi en quelque sorte glissai par ce