Table-styled elements do not show IE gradients correctly

Question

I've run across a peculiarity with IE8/9 regarding its Gradient filter. Consider the following styles:

background:#F2F2F2;
background:-webkit-linear-gradient(top,#F2F2F2,#CECECE);
background:   -moz-linear-gradient(top,#F2F2F2,#CECECE);
background:     -o-linear-gradient(top,#F2F2F2,#CECECE);
background:  linear-gradient(to bottom,#F2F2F2,#CECECE);
-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr='#F2F2F2',endColorStr='#CECECE',GradientType=0)";

The gradients display correctly on elements with display:block;. However when applied to display:table; IE9 will display #F2F2F2 on top of the gradient. To fix this temporarily, I've removed the background-color, but of course now I don't have a solid color fallback.

My question is: why is it doing this and what are the (no-js) workarounds?

Answer 1

The filter gradients have a number of major limitations and bugs. It looks like you've discovered one of them.

If your base-level for browser support is IE9, then you might want to look into using an SVG data-url for the gradient. This is a fairly common work-around for gradients in IE9. Although it can make your code messy and diffiult to work with, it does at least work well.

You can generate an SVG gradient data-url from here: http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

If you need to support IE8 or earlier, this won't work, and frankly I don't think you're going to find any other non-js solution that will satisfy you. (other than going back to the old-skool and using PNG image for the background gradient)

The only good solution I know of that works for all IE versions is to use the CSS3Pie library. Yes, this is a JS lib, so it doesn't meet your non-js criteria, but it's pretty unintrusive (other browsers will ignore it entirely and not even download it). It also has the advantage of allowing you to use standards-based code for your gradients even in really old IE versions. You can still provide a solid colour fall-back for those users who do have JS disabled, so your site should work for everyone to some level or another.