web-dev-qa-db-ja.com

IE9のbox-shadowは正しいCSSを使用してレンダリングせず、Firefoxで動作します。Chrome

フローティングモーダルボックスタイプをシミュレートしようとしていますが、IE9とそのボックスシャドウの実装に問題があります。

問題を再現できるコードの概要を次に示します。

<html>
<head>
    <title>Sample page</title>
    <style>
        .content-holder {
            border-collapse: collapse;
        }
        .back {
            background-color: #a8c0ff;
            padding: 100px;
        }

        .inner {
            background-color: #fff;
            text-align: center;
            padding: 50px;
            box-shadow: 0px 0px 20px #000;
        }

    </style>
</head>
<body>
    <table class="content-holder">
        <tr>
            <td>
                <div class="back">
                    <div class="inner">
                        <h2>Heading</h2>
                        <p class="subtext">Some text here</p>
                        <p>More text</p>
                        <a class="button" href="#">A button</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

Firefox/Chromeなどで正常に動作しますが、IE9は影を表示しません。私はそれをはめ込み影に変えることができ、本来あるべきように見えますが、外側の影は私を避け続けています。

この影の問題に光を当てることができる人はいますか？

htmlcssinternet-explorer-9css3
71
Arowin

コメントで（私ではなく）発見したように、border-collapse: separate;が機能していない要素にbox-shadowを追加する必要があります。

また、最初の回答から、最初の行に<!DOCTYPE html>などの有効なdoctypeがあることを確認してください。 F12キーを押して開発者ツールを起動し、IE9モード（またはそれ以降）が使用されていることを確認します。これはbox-shadowが機能するために必要です。

111
thirtydot

この問題を確認し、@ Arowinの最終的な回避策を2回目にしたのは、一部の人が見逃している可能性があるためです-border-collapse:separate;影響を受ける<div>-IE9は、<div>は<table> with border-collapse:collapse;セット。ありがとう！

19
toyNN

IE9入力ボックスシャドウバグソリューションは、このバグで動作します。

input{
box-shadow: 0px 0px 5px #3699FF;
border-collapse: separate;
}

border-collapse: separate;は、テーブルでこの問題を解決するために追加する必要があるものです。

4
dodortus

The border-collapse: separate;私にとっては部分的にしか解決していません。行に追加された背景色（tr）と、選択（および展開）された行の下の影があります。

背景色は、z-indexの種類の問題のように見えるため、影をブロックします。とにかく、色のrgba値で解決しました。暗い行の色を選択し、アルファ値に20％を使用して、下の影を表示できるようにしました。

 table {border-collapse：separate;} 
 
 tr：nth-​​child（even）{/ *透明な奇数色*/
/*背景色：someothercolor; *// *シャドウは無地で表示されませんでした*/
 background-color：rgba（168,163,136、.2）; 
}
3
Avec

私の場合、有効なDOCTYPEがあったとしても、IE 9は互換モードでドキュメントをレンダリングしていました。ローカルでデバッグしていましたが、IEには「互換表示でイントラネットサイトを表示する」という設定があり、明らかにデフォルトで有効になっています。これを無効にすると、すべてが期待どおりに機能します。これは、[ツール]-> [互換表示設定]にあります。

3
David Marchelya

私も同じ問題を抱えていました。実際、IE9はこれらのスタイルが機能するためにdoctypeを必要としません。問題の原因は、影のあるテーブルでの「border-collapse：collapse」です-cellspacing = 0を使用してから動作します-それでも：bugger IE

3
Johnny Darvall

テーブルセル内にdivがありました。 divでborder-collapse:separateを使用すると、問題が解決しました。

1
dfmiller

はい、cssのいくつかのhtml要素に対していくつかのリセットを行う場合（私自身は古いプロジェクトからのものをコピーアンドペーストするだけで、結果については考えません：D）：

html, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, img, dl, dt, dd, ol, ul,
li, legend, table, tbody, tr, th, td {
    order:0;
    outline:0;
    font-weight:inherit;
    font-style:inherit;
    font-size:100%;
    font-family:inherit; 
    border-spacing: 0;
    border-collapse: collapse;
}

まあ...それをカット border-collapse: collapse そこから独立したものとして追加します

table, tbody, tr, th, td {
    border-collapse: collapse;
}

...したがって、div、p、span、img、または影が必要な場所には適用されません。

1
Allisone

私の場合、何も助けにはなりませんでした。数時間のデバッグの後、次のメタタグが問題であることがわかりました。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
1
Дамян Станчев

私の場合、移行から厳密なXHTML-doctypeへの切り替えが役立ちました。

コンテナテーブルからボーダーコラプスを削除することも役立ちました。

0
Alex

このメタタグは私のためにそれを解決しました。また、その他の奇妙なIE ChromeおよびFirefoxで発生しない問題：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
0
Sean