web-dev-qa-db-ja.com

CSS不透明度がIE11で機能しない

background-color of the tr opaque with this CSS：

.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

http://jsfiddle.net/ZB3CN/6/

それで、ここで何が起こっているのですか？

編集：マイクロソフトにバグレポートを提出しました：https://connect.Microsoft.com/IE/feedback/details/ 868842/ie-11-setting-css-opacity-on-a-table-row-doesnt-affect-the-background-color-of-that-row

編集2：このバグはMicrosoftによって確認されました

編集3：マイクロソフトはこのバグを新しい場所に移動しました：https://developer.Microsoft.com/en-us/Microsoft -Edge/platform/issues/212446 /

htmlcssinternet-explorerinternet-explorer-11
13
ToastyMallows

これはさらに別のようですIEバグ..回避策として、代わりにopacityをrgba() colorのbackgroundプロパティを介して追加できます次に、不透明度をtd要素に追加します。

更新された例 -結果はブラウザ間で一貫しているようです。

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

他の誰かが問題を抱えている場合、それは私を助けました：

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

詳細

6
michal

この行をHTMLの先頭に追加すると、不透明度が正常に機能します

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
1
JSON

<!DOCTYPE html>宣言を追加してみてください。これを見てください answer

0
Paolo Finamore