为什么我的进度条在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中显示不正确？

回答

相关问题