We used Twitter Bootstrap for our latest project and ran into an issue with how gradients display in Internet Explorer. For example, I specified the hex numbers for the navbar using CSS3 gradients, and it was displaying fine in Firefox and Chrome. But in IE 6-8, it displayed as a weird blue color.
The solution
After digging into it, we found that many of the Bootstrap’s default styles are 3-digit hex values. This was undoubtedly an attempt by Bootstrap to limit the amount of code in the core files. However, older versions of IE require all 6 digits of the hex value to display the number correctly when using this filter:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#222', GradientType=0)
For example, if I want my starting gradient color to contain the gray color #555 I was specifying:
#555
But Internet Explorer by default adds 3 zeros before the number, so now it reads as:
#000555
Which is a dark blue color, not gray like I intended.
So just to be safe, we went through all of our core CSS files and changed any 3-digit hex values used in this filter to the full 6 digits. This seemed to solve the problem.