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

Question

我从IE（10）中的HTML5进度条中得到了奇怪的行为，并想知道我是否可以对my 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>

我的风格using CSS我改编自各种来源，应该适用于“所有浏览器”。

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

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

我是否可以在my 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/