Arrière-plan de rgba avec l'alternative de filtre d'IE: IE9 rend les deux!
Je suis en train de faire un div à l'arrière-plan transparent à l'aide d'un mélange de CSS3 rgba()
et microsoft filter
propriété comme cela:
div {
width: 200px;
height: 200px;
/* blue, 50% alpha */
background: rgba(0,0,255,0.5);
/* red, 50% alpha */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
Comme prévu, les navigateurs qui prennent en charge rgba()
rendu de la div que le bleu, tandis que IE 6-8 vous rendre au rouge.
IE9 apparemment peut gérer à la fois (auparavant, j'ai pensé filter
de soutien avait été supprimé) et le résultat est un violet div. Est-il possible de faire IE9 l'appui ou l'autre de ces propriétés, mais pas l'autre? rgba()
serait évidemment préférable.
N. B. je suis à l'aide de IETester pour l'exécution de ces tests. Si la bonne construction de IE9 ne le fait pas, s'il vous plaît laissez-moi savoir.
source d'informationauteur Liam Newmarch
Vous devez vous connecter pour publier un commentaire.
Je suis venu avec une hacky solution de contournement que j'ai pensé partager.
IE9 et ci-dessus prend en charge la
:not()
CSS pseudo-sélecteur. En utilisant un attribut qui n'existe pas sur un élément que nous pouvons obtenir IE9 pour désactiver c'estfilter
dégradé:J'ai fini par l'utilisation de ce parce que mon transparente div uniquement les caractéristiques une fois. Il semblait aussi un peu plus soignée garder les choses en CSS, plutôt que d'utiliser les commentaires conditionnels dans le code HTML.
Edit: En soutien à d'autres réponses, j'ai trouvé cet article de Microsoft dev team encourager les développeurs à utiliser les commentaires conditionnels, pas de CSS solutions de contournement comme le mien.
Si vous êtes en utilisant HTML5, vous pouvez aller en bas de la route de l'aide
et dans votre CSS utiliser quelque chose comme :
Cela semble fonctionner pour moi (pas entièrement testé dans toutes les versions). Selon les discussions en cette blog :racine de sélection est disponible uniquement dans IE9 et donc le code ci-dessous peut être écrit pour supprimer tous les paramètres de filtre dans IE9.
Edit: !important nécessaires pour faire en sorte qu'il fonctionne dans tous les lieux.
Prendre un coup d'oeil au navigateur/version cible à l'aide des commentaires conditionnels. Vous aurez envie de cibler des versions de IE et de mettre en œuvre votre style par version.
http://www.positioniseverything.net/articles/cc-plus.html
La plus simple et la méthode la plus fiable pour le filtre: la compatibilité, j'ai trouvé utilise le code http://www.colorzilla.com/gradient-editor/ génère:
Puis vous ajoutez un
gradient
classe CSS de l'élément qui en a besoin. Et c'est tout.Bien que les commentaires conditionnels sont toujours un peu un hack, à mon avis, ils sont moins que d'universel, de sélecteurs, ou les goûts :pas et n'ont pas les risques liés à la performance.
Rappeler que Microsoft a chuté de commentaires conditionnels de IE10 et au-dessus, mais vous devriez presque jamais besoin d'eux pour ces versions.
Je n'aurais pas confiance IETester; télécharger une machine virtuelle avec une bonne IE9 sur de https://www.modern.ie/en-gb - c'est gratuit; vous n'avez besoin de temps et d'espace disque (conservez l'original afin de télécharger quand il expire, vous pouvez simplement réinstaller.)