RGBa in IE9 not producing the desired result

Question

I have a table, and in an attempt to implement table highlighting I used rgba classes to highlight the rows and columns, while maintaining their original colors in the background.

This is the perfect example of what I wanted to accomplish...until IE9 entered the picture. The background rgba for the blue column shows opaque.

.highlighted-row {
background-color: rgba(255,255,77,0.35) !important;
}
.highlighted-column {
    background: rgba(52,153,207,0.15) !important; 
}

Answer 1

That does appear to be a bug in IE9 despite the fact that it apparently fully supports rgba() colors.

Option #1 - Hardcode the Colors

As you stated in a comment on another answer, hardcoding the colors is one solution. There are a couple ways you could do that, but here is my recommendation:

If you change the background colors to be applied on a <td> level, hardcoding the background colors will work great and even allows you to keep using alpha. This will allow it to blend with any background colors or images behind the table. One benefit of this method is that you don't have to change your HTML. The downside of this is that you'll have to calculate the new alpha blend manually, which can be a bit troublesome.

CSS:

td.highlighted {
    background: rgba(52,153,207,0.15); 
}

tr.highlighted td {
    background: rgba(255,255,77,0.35);
}

tr.highlighted td.highlighted {
    background: rgba(187, 227, 127, 0.4475);
}

HTML:

<table>
    <tr class="highlighted">
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>       
    <tr>
        <td>1928</td>
        <td>Test</td>
        <td class="highlighted">$1,000,000.00</td>
    </tr>
</table>

Option #2 - Use a <div>

If you don't want to have to hardcode your CSS colors, you can wrap the contents of each potentially highlighted table cell in a <div> that is sized to fit.

I would not recommend this method because it is going to be a bigger pain to maintain in the long run and makes your HTML more complicated. However, if you want to retheme your website, using this method temporarily while you are adjusting colors can make things easier for you if you're limited to IE9.

CSS:

tr.highlighted {
    background: rgba(255,255,77,0.35);
}

td>div {
    width: 100%;
    height: 100%;
    padding: 0;
}

td.highlighted>div {
    background: rgba(52,153,207,0.15); 
}

HTML:

<table>
    <tr class="highlighted">
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</td>
    </tr>
    <tr>
        <td><div>1928</div></td>
        <td><div>Test</div></td>
        <td class="highlighted"><div>$1,000,000.00</div></td>
    </tr>
</table>

Answer 2

Instead of background-color try using just background.

.highlighted-row {
background: rgba(255,255,77,0.35) !important;
}