Comment puis-je ne pas montrer une ombre CSS sur IE6?

StackOverflow https://stackoverflow.com/questions/6032108

  •  14-11-2019
  •  | 
  •  

Question

Je veux savoir si je peux ignorer mon ombre CSS sur IE6 sans utiliser des instructions conditionnelles pour filtrer le CSS.

Voici mon CSS actuel:

/* Drop shadow */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.7);

Peut-être -ms-filter-ie6: none ou quelque chose: p dans ce sens

Était-ce utile?

La solution

Ajout de la ligne suivante dessous ton -ms-filter: La ligne doit fonctionner:

* html -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(enabled=false)";

La * html est lu uniquement par IE6. Mais c'est un hack CSS, ce qui est une très mauvaise pratique. Vous devez utiliser des conditions à la place.

Autres conseils

Utilisez un IE uniquement Commentaire conditionnel CSS Cela désactive le filtre propriétaire pour IE6 / Win:

<!--[if IE 6]>
    <style type="text/css">
        .drop-shadow {
            filter: progid:DXImageTransform.Microsoft.Shadow(enabled='0');
        }
    </style>
<![endif]-->

La 'activé«L'attribut de filtre est un booléen qui s'attend à une valeur vraie ou fausse pour activer ou désactiver le filtre:

0 = false (le filtre est désactivé)
1 = true (valeur par défaut. Le filtre est activé)

IE6 ne connaît que filter, il ne reconnaîtra pas le -ms-filter style, donc tomber filter ferait l'affaire. L'inconvénient est que cela le tuerait également pour IE7.

Vous pouvez utiliser TE /**/ pirater.

filter/**/: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Il devrait être ignoré par IE6, mais je n'ai pas IE6 pour le tester.

Comme Justin Satyr l'a dit, c'est un hack et vous devriez utiliser des commentaires conditionnels.

J'ai mis les conditions sur le <html> étiquette:

<!DOCTYPE HTML>
<!--[if lt IE 7 ]>  <html class="ie ie6"><![endif]-->
<!--[if gte IE 7 ]> <html class="ie"><![endif]-->
<!--[if ! IE ]><!--><html class="notie"><!--<![endif]-->
<head>
    ...

Et puis dans la feuille de style que l'on peut faire (vous n'avez besoin que d'une seule feuille de style maintenant, et pas de styles en ligne dans le HTML)

.ie6 .drop-shadow
{
    filter:none; /* or whatever */
}

Si vous avez besoin de code différent pour d'autres IES, vous pouvez ajouter plus de conditions. J'ai eu un projet où IE6, IE7, IE8 et IE9 se sont tous comportés différemment pendant au moins un élément (mais FF, Chrome et Safari étaient proches), donc il y avait cinq différents <html> Mots clés.

Si vous utilisez Dreamweaver, j'ai entendu dire que vous aurez besoin des mêmes commentaires autour du </html> aussi bien.

Si vous avez besoin de code différent pour d'autres navigateurs, vous devrez utiliser jQuery ou similaire pour ajouter des classes: comme $('html').addClass('ff4'); bien que les choses puissent être inattendues si JS n'est pas activé.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top