background color and ms-linear-gradient issue in IE8 and IE9

Question

Below are the CSS applied and got this issue,

 background-color: rgba(91, 94, 85, 0.5) !important;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
filter:ms-linear-gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55); /*fix for round corner edges in IE9 and input mess rendering in all IE */

image 1 : FF,Chrome & IE 9 working fine

image 2 : IE8 not fine

Im not sure how to fix this input properly in IE8. i guess its happen becoz of filter filter:ms-linear-gradient , if i remove this filter in IE8 background color applying but inputs are messed up as below image.

if i have this filter inputs are rendering properly in IE8 background color not applied as expected

Thanks ,

Nithish

Answer 1

Issues with your code:

• background-color: rgba(91, 94, 85, 0.5) !important;
  This line seems OK. It's very likely that the !important flag is redundant, though.
• filter:progid:DXImageTransform.Microsoft.gradient( ... );
  This line is also OK, although the -ms-filter: "..."; syntax is preferred in IE8+ .

• filter:ms-linear-gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
  Here starts the trouble:

  1. Internet Explorer's vendor-prefix is -ms- , (with the hyphen at the start).
  2. -ms-linear-gradient is a value for background , not filter .
     Also, this value is only supported as of IE 10...
• //fix for round corner edges in IE9 Comments in CSS are in this format: /* comment */ .
  No exceptions.

Fix:

background-color: rgba(91, 94, 85, 0.5) !important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F5B5E55,endColorstr=#7F5B5E55)";