Cellule de table perd la bordure lorsque le filtre de gradient css est appliqué dans IE8

Question

J'ai trouvé la bordure css sur la cellule de table est perdu lors de l'application du filtre de gradient css en même temps. Il semble que l'effet de gradient l'emporte sur la frontière.

Est-ce un bug de navigateur ou suis-je manquer quelque chose ici?

Le style est défini comme ceci:

[Mise à jour] Vous pouvez appliquer un filtre d'opacité et le réduire de 100 à 1, et vous pouvez voir comment la frontière émerge progressivement. Cela confirme ma conjecture que l'effet de gradient se manifeste au-dessus de la frontière.

Answer 1

L'application de ce fonctionne également:

Answer 2

J'ai trouvé un fix, mais vous ne pouvez pas ça...

Si vous rendre dans IE en mode quirks la frontière rend très bien, il n'est obscurci si vous utilisez le mode de compatibilité. Comparer ces deux pages dans IE8:

• Avec un DOCTYPE déclaration
  • 
• Sans un DOCTYPE déclaration
  • 

Ce qui fonctionne aussi en cliquant sur le bouton affichage de compatibilité, mais mes tentatives pour obtenir les mêmes résultats avec le mode de compatibilité des balises meta ont été infructueuses. J'ai essayé d'utiliser box-sizing, mais également sans succès. Je conclus que la seule façon de l'obtenir pour fonctionner comme vous le souhaitez est de forcer IE en mode quirks, mais qui peut créer de nombreuses autres questions de mise en page que vous pouvez être mieux de simplement ajouter un élément wrapper pour fixer votre fond dégradé de.

Answer 3

Utilisez un DIV pour contenir le contenu dans chaque cellule. Appliquer le gradient sur le DIV et mettre la bordure sur la cellule. Le gradient sera limité à la DIV et ne dépassera pas la frontière.

http://jsfiddle.net/WWCaj/1/

Answer 4

Après avoir essayé beaucoup de corrections de bugs, j'en suis venu à la conclusion qu'il est tout simplement pas la peine d'essayer d'utiliser le filtre CSS. Une citation de @mdo qui est derrière le Twitter bootstrap css:

Les filtres sont dangereux dans IE, en particulier les 7 & 8. Je préfère ne pas l'inclure, car il avait d'énormes pertes de performance pour les gens qui en abuser.

Les problèmes que j'ai frappé l'application de css à l' td éléments:

• L' position: relative ne fonctionne que pour IE9, pas IE8
• L' z-index: -1 ne fonctionne pas sur les éléments td
• Si vous avez un filtre, alors vous devez le désactiver pour planant
• Ma table avait l'air mieux avoir des frontières que d'avoir le dégradé sur les cellules de la table

Answer 5

position d'utilisation: relative !important;

Son travail très bien ...