Pourquoi un filtre dégradé sur un pseudo-élément ne fonctionne-t-il pas dans IE8?

Question

Je veux créer des boutons comme ceux-ci:

Dans les navigateurs modernes, l'effet est créé à l'aide de l'encart box-shadow et les filtres.
Pour IE8 - pseudo-éléments sont choisis.
Pour IE7 - je utiliser les balises spéciales enveloppé dans les commentaires conditionnels.

Démo: http://jsfiddle.net/8M5Tt/68/embedded/result/

Question principale: Pourquoi ne pas les filtres de travail sur les pseudo-éléments dans IE8?

---

Mise à jour:

Je suppose que les filtres ne fonctionnent pas sur css contenu généré par l', malgré le fait qu'il n'est pas mentionné sur cette page msdn.

J'ai résolu mon problème avec IE8 par l'application de filtres à des éléments conditionnels comme je le fais pour IE7.

Finale de la démo: http://jsfiddle.net/matmuchrapna/8M5Tt/73/

---

Mise à jour 2:

J'ai résolu mon problème, mais la principale question est toujours sans réponse:

"Pourquoi ne pas les filtres de travail sur les pseudo-éléments dans IE8?"

Commencé un bounty.

Mise à jour 3: J'ai créé testcase seulement pour les filtres(et aussi -ms-filter) sur ie8:

Mais les filtres ne veulent pas travailler sur les pseudo-éléments.

Mise à jour 4: Je pense que Scotts réponse est plus proche de la vérité.

Answer 1

La question est "Pourquoi ne pas les filtres de travail sur les pseudo-éléments dans IE8?" Ce qui suit est une réponse définitive que je suis capable. Il s'agit de l'information sur cette page.

L' gradient filtre est une "procédure de surface" (avec alphaimageloader). Une procédure de surface est définie ainsi:

Des surfaces procédurales sont de la couleur des surfaces d'affichage entre l' contenu de l'objet et de l'objet de l'arrière-plan.

Lire avec précaution. Il s'agit essentiellement d'une autre "couche" vous pourriez dire entre le contenu de l'objet et de l'objet en arrière-plan. Voyez-vous la réponse à la question? Ce qui est créé par :before et :after... Oui! Contenu. Précisément, en tant que MSDN notes:

L' ::before et ::after pseudo-éléments de spécifier l'emplacement de contenu avant et après un élément dans l'arborescence du document. Le contenu attribut, en conjonction avec ces pseudo-éléments, précise ce est inséré.

Le contenu généré par l'interaction avec d'autres boîtes comme si elles étaient réelles éléments insérés juste à l'intérieur de leur élément associé.

Maintenant, si c'est le contenu qui est généré, puis c'est pas un "objet" contenant du contenu, mais le contenu lui-même (qui arrive à avoir un comportement similaire à un élément de l'objet qui peut contenir du contenu).

Ainsi, il n'est pas un "objet" contenant "contenu" (puisque c' est le contenu), entre lesquelles l' filter pouvez placer une procédure de surface pour le contenu généré par un pseudo-élément (c'est à dire "faux élément"). Un gradient doit être appliqué à l' objet, puis la procédure de surface est placé entre elle et le contenu.

Answer 2

La documentation sur -ms-filter -un synonyme pour filter- unis:

Un objet doit avoir la mise en page pour le filtre à rendre.

Ma première hypothèse était que l' :before contenu n'a pas hasLayout valeur true. Et tandis que ce n'est probablement pas la valeur true, ce n'est probablement pas défini à false soit. Pour commencer, lorsque j'ai suivi le hasLayout docs pour forcer le contenu de hasLayout = true (voir jsfiddle) ça n'a pas de résoudre quoi que ce soit.

Donc, je dirais que c'est ni vrai ni faux. Au lieu de cela, il est probablement pas défini. Je l'ai noté dans les documents qu'il dit à propos de la source de cette propriété:

objet.currentStyle.hasLayout

Si nous avons un regard sur le W3 documentation sur le contenu de la propriété , il dit:

Le contenu généré ne modifie pas l'arborescence du document. En particulier, il n'est pas réinjecté dans la langue du document de processeur (par exemple, pour ré -).

Ainsi, une conclusion possible serait que le contenu généré n'est pas un objet, en tant que tel, il n'a pas un currentStyle de la propriété, et donc aussi de ne pas avoir hasLayout ensemble de true. Ce serait la raison que les filtres ne fonctionnent pas sur le contenu généré par, et donc de répondre à la question.

---

A première vue, je pensais que j'avais trouvé un indice dans la console de la au-dessus de violon:

document.querySelectorAll('div')[0].currentStyle.hasLayout; 
// true

document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle': 
// object is null or undefined

Mais comme mentionné dans les commentaires de @BoltClock: querySelectorAll ne peut pas accéder à des pseudo-éléments.

---

Une autre astuce (même si-encore une fois - rien de plus qu'un soupçon) qu' filter ne fonctionne pas sur les pseudo-éléments peuvent être trouvés dans cette msdn introduction sur les filtres, en indiquant (l'emphase est mienne):

Les filtres sont appliqués à des contrôles HTML à travers le filtre de la propriété

Bien que je ne suis pas sûr de ce que l'on entend par "contrôles HTML", je n'attendrais pas de contenu généré par l' :before pseudo-élément soit considéré comme un "Contrôle HTML".

Answer 3

Plutôt que d'utiliser le style filter IE pour cela, avez-vous envisagé d'utiliser CSS3Pie ?

Ceci est un script pour IE qui ajoute la prise en charge des CSS standard box-shadow et des dégradés. Vous pouvez ainsi écrire le même code dans tous les navigateurs plutôt que de devoir utiliser tous ces styles spécifiques à IE.

Answer 4

J'ai déjà donné mon préféré de la solution (utilisation CSS3Pie), mais je vais poster cela comme une réponse distincte.

Probablement la raison pour laquelle IE8 ne parvient pas à travailler avec des filter où IE7 fonctionne est parce que IE8 changé la syntaxe pour l' filter.

filter est un IE propriétaire spécifique style. Lorsque Microsoft a publié IE8, ils ont fait un grand point d'essayer d'être "conforme aux normes". La "norme" moyen de soutenir un non-style standard est de lui donner un vendeur préfixe, et c'est ce que Microsoft l'a fait.

Donc dans IE8, vous devez effectuer les opérations suivantes:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 )";

IE7 ne supporte pas cette syntaxe, de sorte que vous besoin des deux.

IE8 n'en fait travailler avec l'ancienne syntaxe dans certains cas. Dans les cas où cela ne fonctionne pas ont tendance à être ceux où vous utilisez l' progid: de la syntaxe. La raison pour cela est que le côlon après progid entraîne l'invalidité de la syntaxe CSS, c'est pourquoi MS a ajouté des guillemets autour de l'ensemble de la mince pour la IE8 -ms-filter version.

Donc, en bref, est, d'utiliser les deux versions dans vos feuilles de style, et vous serez amende.

Answer 5

Wow, c'est une question difficile.

Après examen de ce graphique, confirmant que IE8 aime seulement seul des deux points sur sa pseudo-éléments, la lecture de ce possiblement liés à l'article de blog, et faire beaucoup de tests dans jsFiddle (bien que, il est peu par rapport à votre 73?? jsFiddles), je dois en conclure que c'est un bug dans IE8.

IE9 peut faire des dégradés sur les pseudo-éléments (avec base64 absurde), mais IE8 est obstinément cassé.