CSS 不透明度在 IE11 中不起作用

Question

我正在嘗試使用此 CSS 使tr的background-color變得不透明：

.faded{
    background-color: red;
    height: 100px;
    opacity: 0.4;
    filter: alpha(opacity=50);
}

這是我的測試 HTML：

<table>
    <tr class="faded">
        <td><div>testtesttesttestt</div></td>
        <td><div>testtsttesttesttt</div></td>
    </tr>
</table>

在 IE9,10 FF24 Chrome 31+ 中一切正常，但在 IE11 中則不然。 請記住，我不關心表格行的內容，只關心背景不透明度。 屏幕截圖和下面的 Jsfiddle。

IE10： IE10

IE11： IE11

那么，這里發生了什么？

編輯：我已向 Microsoft 提交了錯誤報告： https : //connect.microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-影響該行的背景顏色

編輯 2：此錯誤已由 Microsoft 確認

編輯 3：微軟已將此錯誤移至新位置： https : //developer.microsoft.com/en-us/microsoft-edge/platform/issues/212446/

Answer 1

這似乎是另一個 IE 錯誤。作為一種變通方法，您可以改為通過具有rgba()顏色的背景屬性添加opacity 。 然后簡單地將不透明度添加到td元素。

更新示例- 結果在瀏覽器中似乎一致。

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}

Answer 2

如果其他人有問題，它對我有幫助：

.foo {
  opacity: 0.4;
  position: relative; /* for IE */
}

Answer 3

將此行添加到您的 html 的頭部，並且不透明度將正常工作

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Answer 4

嘗試添加<!DOCTYPE html>聲明。 看到這個答案

Answer 5

這個解決方案對我有用。

background-color: rgba(18, 21, 23, 0.3);

最后一個參數是 alpha 通道（顏色的不透明度），您可以將它從 0.0 傳遞到 1.0 以調整您的顏色不透明度。