Frage Box-Shadow auf IE9 rendert nicht korrektes CSS, funktioniert bei Firefox, Chrome


Ich versuche, eine schwebende modale Box zu simulieren, aber ein Problem mit IE9 und seiner Box-Shadow-Implementierung.

Hier ist eine Zusammenfassung des Codes, den ich verwende, der das Problem duplizieren kann:

<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>

Es funktioniert gut in Firefox / Chrome usw. aber IE9 zeigt den Schatten nicht an. Ich kann es in einen Schatten verwandeln und es scheint so, wie es sein sollte, aber ein äußerer Schatten entzieht sich mir weiterhin.

Wer könnte dieses Schattenproblem beleuchten?


71
2018-04-11 06:17


Ursprung


Antworten:


Wie entdeckt (nicht von mir) in den Kommentaren, müssen Sie hinzufügen border-collapse: separate; zu dem Element das box-shadow arbeitet nicht an.

Und von meiner ursprünglichen Antwort, stellen Sie auch sicher, dass Sie einen gültigen Doctype als die erste Linie, wie <!DOCTYPE html>. Drücken Sie F12, um die Entwicklertools aufzurufen, und stellen Sie sicher, dass der IE9-Modus (oder höher) verwendet wird, da dies erforderlich ist box-shadow arbeiten.


111
2018-04-11 06:27



Ich bestätige dieses Problem und die letzte Workaround von 2nd'ing @ Arowin, da es von einigen Leuten vielleicht übersehen wird - fügen Sie hinzu border-collapse:separate; zu den Betroffenen <div> - IE9 zeigt jetzt den richtigen Schatten, wenn a <div> ist in einem enthalten <table> mit border-collapse:collapse; einstellen. Vielen Dank!


19
2018-06-11 00:01



Die IE9-Eingabefeld-Schatten-Bug-Lösung wird an diesem Fehler arbeiten.

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

border-collapse: separate; ist das, was Sie hinzufügen müssen, um dieses Problem in Tabellen zu beheben.


4
2018-02-08 17:19



Ich hatte das gleiche Problem. Tatsächlich benötigt IE9 keinen Doctype, damit diese Stile funktionieren. Was das Problem verursacht, ist "border-collapse: collapse" auf Tabellen mit Schatten - benutze cellspacing = 0 dann funktioniert es - still: bugger IE


3
2017-09-03 09:17



The border-collapse: separate; nur teilweise gelöst für mich. Wir haben Hintergrundfarbe zu den Zeilen (tr) und Schatten unter der ausgewählten Zeile hinzugefügt (und erweitert).

Die Hintergrundfarbe blockiert den Schatten, da es sich um ein Z-Index-Problem handelt. Jedenfalls haben wir es mit dem rgba Wert für die Farbe gelöst. Wir wählen eine dunklere Zeilenfarbe aus und verwenden 20% für den Alpha-Wert, so dass der Schattenunterstrich angezeigt werden kann.

Tabelle {border-collapse: separate;}

tr: nth-child (gerade) {/ * ungerade Farbe transparent * /
    / * Hintergrundfarbe: etwas andereFarbe; * / / * Schatten wurde nicht durchgehend dargestellt * /
    Hintergrundfarbe: rgba (168, 163, 136, .2);
}

3
2017-10-19 12:31



In meinem Fall rendert IE 9 das Dokument im Kompatibilitätsmodus, obwohl ich einen gültigen hatte DOCTYPE. Ich habe lokal debuggen, und IE hat eine Einstellung "Intranetsites in Kompatibilitätsansicht anzeigen", die scheinbar standardmäßig aktiviert wurde. Nach der Deaktivierung funktioniert alles wie erwartet. Dies kann unter Extras -> Einstellungen der Kompatibilitätsansicht gefunden werden.


3
2017-11-11 14:26



In meinem Fall hat nichts geholfen. Nach stundenlangem Debugging stellte ich fest, dass das folgende Meta-Tag das Problem war:

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

1
2017-11-01 09:01



Ja, wenn Sie ein Reset für mehrere html Elemente in Ihrem CSS durchführen (ich selbst kopiere einfach Sachen aus alten Projekten und denke nie über Konsequenzen nach: 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;
}

gut ... schneiden Sie das border-collapse: collapse von dort und füge es als ein separates hinzu

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

... also wird es nicht auf dein div, p, span, img oder wo immer du den Schatten haben willst angewendet.


1
2017-11-16 18:07



Ich hatte ein div, das in einer Tischzelle war. Verwenden border-collapse:separateauf der div löste das Problem für mich.


1
2018-02-02 16:42



In meinem Fall half der Wechsel von Transitional zu Strict XHTML-Doctype.

Entfernen von Grenz-Kollaps aus der Container-Tabelle ALSO half.


0
2017-10-06 11:55



Dieses Meta-Tag hat es für mich gelöst. Es hat auch andere seltsame IE-Probleme gelöst, die in Chrome und Firefox nicht auftreten:

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

0
2018-02-14 00:31