我有一个表格,为了实现表格突出显示,我使用了 rgba 类来突出显示行和列,同时在背景中保持它们的原始颜色。
这是我想要完成的完美示例……直到 IE9 出现为止。 蓝色列的背景 rgba 显示不透明。
.highlighted-row {
background-color: rgba(255,255,77,0.35) !important;
}
.highlighted-column {
background: rgba(52,153,207,0.15) !important;
}
最佳答案
尽管 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>
关于css - IE9 中的 RGBa 未产生预期的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17489962/