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。这将允许它与桌子后面的任何背景颜色或图像混合。此方法的一个好处是您不必更改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>

Answer 2

而不是background-color尝试仅使用background。

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