css - IE9 中的 RGBa 未产生预期的结果

Question

我有一个表格，为了实现表格突出显示，我使用了 rgba 类来突出显示行和列，同时在背景中保持它们的原始颜色。

这是我想要完成的完美示例……直到 IE9 出现为止。蓝色列的背景 rgba 显示不透明。

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

Answer 1

尽管 it apparently fully supports rgba() colors 这确实是 IE9 中的一个错误.

选项 #1 - 对颜色进行硬编码

正如您在对另一个答案的评论中所述，对颜色进行硬编码是一种解决方案。有几种方法可以做到这一点，但这是我的建议:

如果您更改要应用于 <td> 的背景颜色水平，硬编码背景颜色会很好，甚至允许您继续使用 alpha。这将允许它与 table 后面的任何背景颜色或图像混合。这种方法的一个好处是您不必更改 HTML。这样做的缺点是您必须手动计算新的 alpha 混合，这可能有点麻烦。

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>

选项 #2 - 使用 <div>

如果您不想硬编码您的 CSS 颜色，您可以将每个可能突出显示的表格单元格的内容包装在 <div> 中。尺寸适合。

我不推荐这种方法，因为从长远来看，维护起来会更痛苦，并且会使您的 HTML 更加复杂。但是，如果您想重新设计您的网站，请使用此方法如果您仅限于 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>