SharePoint 2013 Background-Color Not Rendering in IE 8

Question

I am developing a SP13 site. IE8 does not render the background color of the title bar. It works fine in 9, 10, & other browsers. Has anyone else experienced this issue?

CSS

 .title
 {
   background-color: rgb(154, 153, 152);
 }

HTML

 <div class="title">
   <div class="logo"></div>
   <div class="search"></div>
 </div>

In the developer tools, I can see the style being applied to the element but it clearly does not render. The background color renders as white.

Answer 1

Apparently IE adds this class when it detects IE8.

.ms-core-needIEFilter
{
   display: block;
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d8ffffff,endColorstr=#d8ffffff);
   background-color: transparent;
}

This causes the background color to be overwritten. If you apply !important to your style, the filter property distorts your background color. You have to overwrite all these in your class.

Solution

 .your-class
 {
   filter: !important;
   background-color: #0000 !important;
 }

Answer 2

use background : instead of background-color :

 .title
 {
   background: rgb(154, 153, 152);
 }

source: http://css-tricks.com/ie-background-rgb-bug/