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

【问题标题】：Why are my progress bars displaying incorrectly in IE?为什么我的进度条在 IE 中显示不正确？
【发布时间】：2014-02-14 12:57:40
【问题描述】：

我在 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 中正确显示吗？

【问题讨论】：

标签： html css internet-explorer progress-bar

【解决方案1】：

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

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

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

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

【讨论】：

那是我应该在整个 IE 中使用的伪元素吗？也就是说，我应该使用它-webkit-progress-value 吗？
是的 - 这仅控制进度条的确定部分（如::-webkit-progress-value）。
它是background-color 不是颜色？换句话说：它就像 Webkit/Moz，但在我有 -webkit-progress-value/-moz-progress-bar 的任何地方都替换为 -ms-fill？（我使用的示例对处理 IE 有不同的建议。）
我不能说是使用background-color 还是color（因为它们都有效）但我会说是的，你应该在使用::-webkit-progress-value 的任何地方包括::-ms-fill 和::-moz-progress-bar.
如果它根本不显示，那很好。旧的IE我不关心，只要它不会产生混乱。