为什么我的进度条在IE中显示不正确？

Question

我从我的HTML5进度条在IE(10)遇到奇怪的行为,不知道是否有什么我可以做我的CSS来解决它.

我有一些简单的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>

我使用的CSS风格,我已经从各种来源改编,应该在"所有浏览器"上工作.

在IE以外的所有浏览器上,我得到了我的期望:

但是在IE上,每个条形的末尾都会添加一条黑线,100%条形图不会显示正确的颜色:

我可以在CSS中更改某些内容以使IE进度条在IE中正确显示吗？

Answer 1

使用::-ms-fill伪元素:

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

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

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