爲什麼我的進度條在IE中顯示不正確？

我在IE（10）中從我的HTML5進度條中得到奇怪的行爲，並想知道是否有任何事情可以通過my CSS來修復它。爲什麼我的進度條在IE中顯示不正確？

我有一些簡單的HTML元素progress

<progress max="100" value="10"></progress><br/> 
<progress max="100" value="30"></progress><br/> 
<progress max="100" value="50"></progress><br/> 
<progress max="100" value="70"></progress><br/> 
<progress max="100" value="90"></progress><br/> 
<progress max="100" value="100"></progress>

，我已經風格using CSS，我已經適應從各種來源，其應該在「所有的瀏覽器」的工作。

在除IE之外的所有瀏覽器中，我得到了我期望：

enter image description here

但在IE瀏覽器，一條黑線在每個欄的末尾，並將100％欄不顯示正確的顏色：

enter image description here

有什麼我可以my CSS改變，以獲得IE進度條在IE中正確顯示？

來源

2014-02-14 orome

使用::-ms-fill僞元素：

progress::-ms-fill { 
    border: none; 
} 

progress[value="100"]::-ms-fill { 
    background-color: #00ff00; 
}

http://jsfiddle.net/PzrLu/13/

來源

2014-02-14 13:08:42 Karma

那是僞元素，我應該爲整個IE使用 - 也就是說，我應該使用它不管我有'-webkit-進步價值'？ – orome

是 - 它只控制進度條的確定部分（如':: - webkit-progress-value'）。 – Karma

它的'背景顏色'不是顏色？換句話說：它就像Webkit/Moz，但是我用'-webkit-progress-value' /'-moz-progress-bar'替換'-ms-fill'？（我正在使用的示例對處理IE有不同的建議。） – orome

爲什麼我的進度條在IE中顯示不正確？

回答

相關問題