web-dev-qa-db-fra.com

CSS Box-Shadow ne fonctionne pas dans IE

Comment pourrais-je obtenir cela pour fonctionner dans IE?

.fancy {
     border: 1px solid black;
     margin: 10px;
     box-shadow: 5px 5px 5px #cccccc;
     -webkit-box-shadow: 5px 5px 5px #cccccc;
     -moz-box-shadow: 5px 5px 5px #cccccc;
}

Merci

cssinternet-explorercss3
10
Daniel Harris

Sur votre site, cette règle CSS empêche box-shadow de fonctionner dans IE9:

table, table td {
    border-collapse: collapse;
}

Voir: box-shadow sur IE9 ne rend pas l'utilisation de CSS correct, fonctionne sur Firefox, Chrome

Vous devez ajouter border-collapse: separate; à l'élément sur lequel box-shadow Ne fonctionne pas.

Donc, cela devrait résoudre le problème pour vous:

.fancy {
    border-collapse: separate;
}
50
thirtydot

box-shadow est supporté à partir d'IE9. 

Il existe de nombreux sites décrivant la procédure à suivre pour les anciens IE. L'un d'eux est: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

Consultez également: http://www.css3.info/preview/box-shadow/

Mon personal en général sur la façon de faire en sorte que les navigateurs plus anciens fassent des choses qu'ils ne peuvent pas réellement est la suivante: Evitez-le . Appliquez plutôt les principes de amélioration progressive . Expliquez également à votre client que la résolution des problèmes de obsolète, navigateurs non standard avec solution non standard, prend beaucoup de temps et ne vaut probablement pas la peine. 

7
TJ.

Cela fonctionne très bien dans IE 9.

Les versions précédentes ne supportent pas box-shadow, mais vous pouvez utiliser un filtre:

zoom: 1;
filter:
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=90),
  progid:DXImageTransform.Microsoft.Shadow(Color=#eeeeee, Strength=15, Direction=180);

Lire: http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/

5
Guffa

Vous pouvez également utiliser http://css3pie.com/

PIE permet à Internet Explorer 6-9 de rendre plusieurs des fonctionnalités de décoration CSS3 les plus utiles .

2
stewe

De google: filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3);

Probablement pas exactement comme vous le souhaitez, mais manipulez-le ou examinez DXImageTransform un peu plus.

1
Matthew

Sur IE, vous devez utiliser le filtre pour cet effet.

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
1
Sven Bieder

Par défaut, IE configurait le mode de compatibilité IE10 qui devait être remplacé par IE 9 à l'aide d'une balise méta. Ainsi, chaque fois qu'il sera exécuté sur d'autres navigateurs, il utilisera le CSS qui sera compatible avec IE9. Comme dans le mode de compatibilité IE10, la propriété CSS de box-shadow a été supprimée de la bibliothèque.

Nous pouvons utiliser une méta-balise en tête uniquement pour modifier le niveau de compatibilité des documents:

<meta http-equiv="X-UA-Compatible" content="IE=8,IE=9" />

La balise ci-dessus montre que ce document est compatible avec IE8 et IE9 pour les navigateurs autres que IE8 et IE9 commutent le niveau CSS sur IE9.

1
Wasif Kirmani

Je crois que ce problème est spécifique à votre navigateur, car cela fonctionne pour moi dans ce jsFiddle sur IE9 et Chrome. Le lien que vous avez fourni fonctionne dans Chrome, mais pas dans IE9. Cela indiquerait que le problème est spécifique à votre implémentation. 

Je voudrais vérifier que le mode de compatibilité est désactivé, et également vous assurer qu'aucun paramètre n'interfère avec CSS. Je suggérerais également de tester cela dans plusieurs navigateurs et d'utiliser un processus d'élimination pour déterminer pourquoi cela ne fonctionne pas.

EDIT

Je regardais juste votre balisage. Essayez de supprimer cette ligne et voyez si cela fait une différence:

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

C'est déjà 2018, ça se passe pareil avec IE11. Parfois/ box-shadow ne fonctionne pas, mais parfois ça marche.

J'ai essayé ceci avec IE11 et IE10: Essayez de changer le display de l'élément où vous voulez ajouter l'ombre (habituellement "display: block" fonctionne bien):

.fancy {
  display: block;
  border: 1px solid black;
  margin: 10px;
  box-shadow: 5px 5px 5px #ccc;
}
0
Soul Eeater