3

メーターバーで次の 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);
}

編集: スクリーンショットは、Mozilla と Safari (左) と Chrome を比較したもので、右側に表示されるはずです。すべての要素が表示されていますが、最初の 2 つの要素では色と境界線の半径が機能しません。

4

2 に答える 2

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 もこれで何とか修正されました

于 2016-08-01T20:13:21.923 に答える