Progress in IE

Progress bars in IE add a black line and don't show the specified color for 100%.

by Aldaron

HTML

<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

progress,
progress[value]
{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    background-size: auto;

    width: 200px;
    height: 20px;

    border: 0;
    color: #eee;
}

progress::-webkit-progress-value,
progress::-moz-progress-bar
{
    background-color: black;
}

progress[value]::-webkit-progress-bar
{
  background-color: #eee;
}
progress:hover, img:hover
{
    opacity: 0.7;
}

progress[value^="0"]::-webkit-progress-value,
progress[value^="1"]::-webkit-progress-value,
progress[value^="2"]::-webkit-progress-value
{
   background-color: red;
}
progress[value^="0"]::-moz-progress-bar,
progress[value^="1"]::-moz-progress-bar,
progress[value^="2"]::-moz-progress-bar
{
   background-color: red;
}
progress[value^="0"],
progress[value^="1"],
progress[value^="2"]
{
   color: red;
}

progress[value^="3"]::-webkit-progress-value,
progress[value^="4"]::-webkit-progress-value,
progress[value^="5"]::-webkit-progress-value
{
     background-color: yellow;
}
progress[value^="3"]::-moz-progress-bar,
progress[value^="4"]::-moz-progress-bar,
progress[value^="5"]::-moz-progress-bar
{
     background-color: yellow;
}
progress[value^="3"],
progress[value^="4"],
progress[value^="5"]
{
   color: yellow;
}

progress[value^="6"]::-webkit-progress-value,
progress[value^="7"]::-webkit-progress-value,
progress[value^="8"]::-webkit-progress-value,
progress[value^="9"]::-webkit-progress-value
{
    background-color: green;
}
progress[value^="6"]::-moz-progress-bar,
progress[value^="7"]::-moz-progress-bar,
progress[value^="8"]::-moz-progress-bar,
progress[value^="9"]::-moz-progress-bar
{
    background-color: green;
}
progress[value^="6"],
progress[value^="7"],
progress[value^="8"],
progress[value^="9"]
{
   color: green;
}

progress[value="100"]::-webkit-progress-value
{
    background-color: #00ff00;
}
progress[value="100"]::-moz-progress-bar
{
    background-color: #00ff00;
}
progress[value="100"]
{
    background-color:...