html - 为什么我的进度条在 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/