Les dégradés CSS dans IE7 et IE8 provoquent l'alias du texte

Question

J'essaie d'utiliser un dégradé CSS dans une div contenant du texte. Avec Gecko et Webkit, le texte s'affiche correctement. Dans IE7 & IE8 le texte apparaît aliasé (jaggy).

Je suis tombé sur ce blog en déclarant: "nous avons décidé de désactiver ClearType sur les éléments qui utilisent n'importe quel DXTransform".

IE Blog: http://blogs.msdn.com/ie/archive/2006/08/31/730887.aspx

C'était en 2006; 3,5 ans plus tard, je suppose que ce bug serait corrigé, mais ce n'est pas le cas. Existe-t-il un moyen de faire cela dans IE8 sans avoir à bourrer une image de fond répétée dans le div?

Voici un exemple de ce que je veux dire.

<style> 
    div 
    { height:  50px; 
     background: -moz-linear-gradient(top, #fff, #ddd); 
     background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); 
    } 
</style> 

<div>Hello World</div> 
<p>Normal text</p> 

Dans IE, le texte dans la div est un alias (Jaggy), et le texte du paragraphe est pas.

Toute solution qui n'implique pas d'images serait grandement appréciée.

Answer 1

Cela peut ne pas compter comme une solution élégante (ou fonctionnelle), mais qu'en est-il de l'utilisation de Cufón pour IE?

Answer 2

Oui, c'est un problème avec IEx.

Essayez d'utiliser une couleur de fond solide:

/*replace #ccc with the color you want*/ 
background: url(images/gradient-image.png) top repeat-x #ccc 

Maintenant, pas besoin d'utiliser l'expression « ... bourrer une image d'arrière-plan répétitif », car il n'y a rien de mal à utiliser une image d'arrière-plan et répéter Nous devrions être reconnaissants que nous puissions non seulement faire cela, mais nous pouvons le répéter en X et Y.

Bien sûr, vous voulez rendre votre image de fond répétitive aussi efficace que possible, alors faites-la petite/mince (selon votre conception) et l'utiliser, rassurez-vous, vous ne faites rien de mal ou contre ndards ou meilleures pratiques.

Answer 3

Il n'y a pas bonne solution à ce problème.

Pire encore: progid:DXImageTransform.Microsoft.gradient est bogué horriblement donc les événements de souris (vol stationnaire, cliquez, etc.) passent à droite creux - un clic sur un tel élément également déclenche une séparée cliquez sur quel élément qui se trouve être positions derrière. Il faut se méfier! Quoi qu'il en soit, il vaut mieux commencer à considérer les solutions de rechange/solutions de contournement/NastyHacks qui vous semblent acceptables.

Voici quelques idées du haut de mon esprit - dans l'ordre de ma préférence personnelle:

1. Juste Repli à une background-color solide simple dans IE et de passer avec votre vie. (Assurez-vous de placer cette règle backgroundpremière pour être en toute sécurité surchargée/ignoré par FF et Webkit.)

2. Utilisez un background-image dans IE.(Repositionner cette règle CSS à premier)

3. continuer à utiliser le hack gradient et simplement « sucer » et accepter le texte Jaggy pour IE.

4. utilisez Javascript (ou la syntaxe propriétaire d'IE expression() CSS) pour injecter un élément vide, lui appliquer le dégradé et le placer derrière le texte.

   div { 
       background: -moz-linear-gradient(top, #fff, #ddd); 
       background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 
       behaviour: expression(jQuery(this).wrapInner('<div class="ie-wrap"/>').prepend('<div class="ie-gradient"/>'); this.runtimeStyle.behaviour='none'); /* disable repeat runs */ 
       position: relative; 
   } 
   div div.ie-wrap { 
       position: relative; 
   } 
   div div.ie-gradient { 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: expression(this.runtimeStyle.height=this.parentNode.clientHeight+"px"); 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff, endColorstr=#ffdddddd); 
   } 
   

   (Attention: au-dessus du code est pile non testé de merde et probablement fonctionne pas comme il est..)

5. continuer à utiliser le hack gradient et utiliser Cufon pour remplacer le texte Jaggy avec VML rendu texte. (Repose sur l'hypothèse que votre site utilise une police de caractères qui permet font-plongement.)

Answer 4

Vous pouvez essayer d'utiliser un IE CSS3 composant HTML, comme PIE (http://css3pie.com,) qui fait un travail assez décent des dégradés de rendu. (Bien que ce soit essentiellement en utilisant javascript)

Answer 5

J'ai eu une situation où je voulais que les arrière-plans des zones de texte soient certaines couleurs passant horizontalement au blanc et définies par hexadécimal dans le CSS. Je voulais éviter de faire des images d'arrière-plan couleur dans le cas où un membre non-développeur de mon entreprise voulait ajouter une nouvelle couleur avec hexadécimal seulement.

La solution que j'ai trouvée était de faire un PNG de 24 bits de gradient blanc dans l'ensemble transparent à la largeur de la zone que je faisais.

J'ai ensuite utilisé cette IE seule hack pour le CSS pour rendre une couleur d'arrière-plan de mon choix qui se fond au blanc:

background /*\**/: #CCCED4 url('/white_to_transparent.png') repeat-y top left\9; 

(le hack pourrait être améliorée, mais il fonctionne pour moi, y compris IE9)

Answer 6

Enroulez le contenu d'un DIV puis ajoutez ce au style css de la DIV ...

position: relative; 

http://cookbooks.adobe.com/post_IE8_clearType_fix_when_using_filters-16676.html

Answer 7

J'ai trouvé une autre solution peu coûteuse (bit opaque). Le texte est de nouveau anti-alisé, lors de l'encapsulation du noeud de texte et de la mise en position relative de chaque élément. Ne demandez pas pourquoi ...

laisse supposer:

<html> 
<head> 
    <title>IE8 filter problem causing jagged fonts</title> 
    <style> 
    html, body, div, span, b, i, ul, li, h1, h2, h3 ... to be continued { 
     position: relative; 
    } 
    .gradient { 
     filter: 
     progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#e6e6e6'); 
    } 
    </style> 
</head> 
<body> 
    <div class="gradient"> 
    <div>I am wrapped, therefore not jagged</div> 
    </div> 
</body> 
</html> 

espoir qui aide quelqu'un là-bas. Dans ce cas, il n'est pas nécessaire d'utiliser des images d'arrière-plan ou des dérivés.

Exemple de travail dans jsFiddle: http://jsfiddle.net/SLZpE/2/