web-dev-qa-db-fra.com

box-shadow sur IE9 ne s'affiche pas en utilisant le bon CSS, fonctionne sur Firefox, Chrome

J'essaie de simuler une chose de type boîte modale flottante, mais j'ai un problème avec IE9 et son implémentation d'ombre de boîte.

Voici un résumé du code que j'utilise qui peut reproduire le problème:

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

Cela fonctionne bien dans Firefox/Chrome, etc., mais IE9 n'affiche pas l'ombre. Je peux le changer en une ombre incrustée et il apparaît comme il se doit, mais une ombre extérieure continue de m'échapper.

Quelqu'un là-bas est capable de faire la lumière sur ce problème d'ombre?

htmlcssinternet-explorer-9css3
71
Arowin

Comme découvert (pas par moi) dans les commentaires, vous devez ajouter border-collapse: separate; à l'élément que box-shadow ne fonctionne pas.

Et à partir de ma réponse originale, assurez-vous également que vous avez un doctype valide comme toute première ligne, comme <!DOCTYPE html>. Appuyez sur F12 pour afficher les outils de développement et assurez-vous que le mode IE9 (ou version ultérieure) est utilisé, car il est requis pour box-shadow travailler.

111
thirtydot

Je confirme simplement ce problème et nous contournons la dernière solution de contournement de @ Arowin, car certains pourraient la manquer - ajoutez border-collapse:separate; aux personnes concernées <div> - IE9 affiche maintenant l'ombre correcte quand un <div> est contenu dans un <table> avec border-collapse:collapse; ensemble. Merci!

19
toyNN

La solution de bogue de zone de saisie IE9 fonctionnera sur ce bogue.

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

border-collapse: separate; est ce que vous devez ajouter pour résoudre ce problème sur les tables.

4
dodortus

The border-collapse: separate; seulement partiellement résolu pour moi. Nous avons ajouté une couleur d'arrière-plan aux lignes (tr) et une ombre sous la ligne sélectionnée (et développée).

La couleur d'arrière-plan bloque l'ombre car il semble s'agir d'un problème de type z-index. Quoi qu'il en soit, nous l'avons résolu avec la valeur rgba pour la couleur. Nous choisissons une couleur de ligne plus foncée et utilisons 20% pour la valeur alpha afin que l'ombre en dessous puisse être affichée.

 table {border-collapse: distinct;} 
 
 tr: nième enfant (pair) {/ * couleur impaire transparente */
/* couleur de fond : someothercolor; *// * l'ombre ne s'affichait pas en couleur unie */
 couleur de fond: rgba (168,163,136, .2); 
}
3
Avec

Dans mon cas, IE 9 rendait le document en mode de compatibilité, même si j'avais un DOCTYPE valide. Je déboguais localement et IE a un paramètre "Afficher les sites intranet dans la vue de compatibilité" qui était activé, apparemment par défaut. Après avoir désactivé cela, tout fonctionne comme prévu. Cela peut être trouvé sous Outils -> Paramètres d'affichage de compatibilité.

3
David Marchelya

J'avais le même problème. En fait, IE9 ne nécessite aucun doctype pour que ces styles fonctionnent. Ce qui cause le problème est "border-collapse: collapse" sur les tables avec shadow - utilisez cellspacing = 0 alors cela fonctionne - toujours: bugger IE

3
Johnny Darvall

J'avais un div qui était à l'intérieur d'une cellule de table. En utilisant border-collapse:separate sur le div a résolu le problème pour moi.

1
dfmiller

Oui, si vous effectuez une réinitialisation de plusieurs éléments html dans votre CSS comme (moi-même, je copie et colle des trucs d'anciens projets, sans jamais penser aux conséquences: 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;
}

eh bien ... coupe ça border-collapse: collapse de là et l'ajouter en tant que séparé

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

... donc il n'est pas appliqué à votre div, p, span, img ou partout où vous avez besoin de l'ombre.

1
Allisone

Dans mon cas, rien n'a aidé. Après des heures de débogage, j'ai constaté que la balise Meta suivante était le problème:

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

Dans mon cas, le passage de Transitional à Strict XHTML-doctype a aidé.

La suppression de border-collapse de la table de conteneurs a également aidé.

0
Alex

Cette balise META l'a résolu pour moi. Il a également résolu d'autres problèmes étranges IE qui ne se produisent pas dans Chrome et Firefox:

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