CSS Customized button not displaying properly with Internet Explorer 9

Question

Again, I am facing issues with IE9 and CSS.

In this case I have a button and it shows some weird shadow or border within the letter of the text inside the button.

Here is the example: http://jsfiddle.net/vYzcY/

.addToCart {
cursor: pointer;
max-width: 200px;
min-width: 136px;
height:26px;
text-align: center;
font-family: Arial,Helvetica,Verdana,Sans-serif;
font-size: 12px;
font-weight: bold;
padding: 1px 6px;
background-color: #492409;
color: white;
margin-top: 5px;
margin-bottom: 10px;
clear: both;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

Thanks!

Answer 1

This is caused by the input being set to disabled: disabled="disabled"

Unfortunately it seems like you cannot modify the color of the text for disabled inputs in IE using CSS:

How to change color of disabled html controls in IE8 using css