Why are my progress bars displaying incorrectly in IE?

Question

I'm getting strange behavior from my HTML5 progress bars in IE (10) and wonder if there's anything I can do to my CSS to fix it.

I have some simple HTML progress elements

<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>

That I've styled using CSS that I've adapted from various sources which ought to work on "all browsers".

On all browsers other than IE, I get what I expect:

But on IE, a black line is added at the end of each bar, and the 100% bar does not display the correct color:

Is there something I can change in my CSS to get the IE progress bars to display correctly in IE?

Answer 1

Use the ::-ms-fill pseudo element:

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

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

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