我在米杆上使用了以下css，但不知何故造型在safari上無法使用（請參見下面的截圖）。我對CSS非常陌生，在css下複製。根據評論，這應該適用於所有瀏覽器。 mozilla和safari的造型米杆

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，它應該是看右邊的方式之間的比較。所有元素都顯示，但前兩種顏色和邊界radis不起作用。

來源

2016-07-27 Reinier

看起來像一個挑剔的元素。只需在它周圍包裝一個div（在這種情況下，我稱之爲「.meter」），並將border屬性應用於該屬性，並使用overflow：hidden。然後將父容器的高度與儀表匹配。

.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); 
}

來源

2016-07-27 21:06:04

一位在存在最大的站點中的人類說，儀表杆由mozilla和safari支持，我應該如何將這些知識用於我的造型問題？ – Reinier

我的問題還不夠清楚，問題純粹是造型，所以顏色，邊框和邊框半徑。 – Reinier

編輯我的答案。 –

添加下面的工作對我來說：

*::-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-01 20:13:21 Reinier

mozilla和safari的造型米杆

eacda3：金

607d8b：深綠色

回答

相關問題