CSS-Verläufe in IE7 & IE8 verursacht Text Aliasing

Question

Ich versuche, einen CSS-Farbverlauf in einem div mit etwas Text zu verwenden. Mit Gecko und Webkit wird der Text gut angezeigt. In IE7 & IE8 erscheint der Text aliased (jaggy).

Ich stieß auf diesen Blog mit der Aussage: "Wir entschieden uns, ClearType auf Elementen zu deaktivieren, die eine DXTransform verwenden".

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

Die im Jahr 2006 zurück; 3,5 Jahre später, nehme ich an, dass dieser Fehler behoben sein wird, aber es ist nicht. Gibt es eine Möglichkeit, dies in IE8 zu tun, ohne auf ein wiederholendes Hintergrundbild im div zu stopfen?

Hier ist ein Beispiel, was ich meine.

<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> 

In IE, der Text in der div ist aliased (jaggy) und der Text im Absatz nicht.

Jede Lösung, die keine Bilder enthält, würde sehr geschätzt werden.

Answer 1

Dies kann nicht als elegante (oder funktionierende) Lösung zählen, aber wie wäre es mit Cufón für IE?

Answer 2

Ja, das ist ein Problem mit IEx.

Versuchen Sie, eine solide Hintergrundfarbe mit:

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

Nun, keine Notwendigkeit, den Ausdruck „... ein sich wiederholendes Hintergrundbild Füllung“, da nichts falsch gibt es mit mit einem Hintergrundbild und wiederholen wir sollten dankbar sein, dass wir das nicht nur machen können, aber wir können es in X und Y wiederholen.

Natürlich möchten Sie Ihr Hintergrundbild so effizient wie möglich machen, also machen Sie es klein/dünn (abhängig von Ihrem Design) und verwenden Sie es, seien Sie versichert, Sie tun nichts falsch oder gegen jeden sta ndards oder Best Practices.

Answer 3

Es gibt keine gute Lösung für dieses Problem.

Schlimmer noch: progid:DXImageTransform.Microsoft.gradient ist schrecklich Buggy so Mausereignisse (Schweben, klicken, etc.) übergeben Sie es richtig Trog - ein Klick auf ein solches Element auch löst eine separate Klick auf welch auch immer Element, das Positionen passiert zu sein dahinter. In acht nehmen!

Unabhängig davon, sollten Sie besser anfangen zu überlegen, welche Fallbacks/Workarounds/NastyHacks für Sie akzeptabel sind.

Hier sind ein paar Ideen aus der Spitze von meinem Kopf - um meine persönlichen Vorlieben:

1. Nur Fallback auf eine einfaches festen background-color in IE und mit Ihrem Leben weitergehen. (Achten Sie darauf, dass background Regel platzieren erste für sie von FF und Webkit sicher überschrieben/ignoriert werden.)

2. Verwenden Sie ein background-image im Internet Explorer.(Setzen Sie diese CSS-Regel wieder auf erste)

3. Verwenden Sie den Gradienten-Hack und einfach 'saugen' und akzeptieren Sie die Jaggy Text für IE.

4. Verwenden Sie Javascript (oder die proprietäre CSS-Syntax expression() von IE), um ein leeres Element einzufügen, wenden Sie den Farbverlauf darauf an und platzieren Sie es hinter dem Text.

   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); 
   } 
   

   (Achtung: obige Code ist nicht getestet Haufen Mist und wird wahrscheinlich nicht arbeiten wie..)

5. Halten Sie den Gradienten Hack und verwenden Cufon den jaggy Text mit VML gemacht zu ersetzen Text. (Beruht auf der Annahme, dass Ihre Website eine Schrift verwendet, die font-Einbettung erlaubt.)

Answer 4

Sie könnten versuchen, eine IE CSS 3 HTML-Komponente verwenden, wie PIE (http://css3pie.com,), der einen ziemlich guten Job tut Rendering Gradienten. (Obwohl dies im Wesentlichen JavaScript verwendet)

Answer 5

Ich hatte eine Situation, wo ich wollte, dass die Hintergründe von Textbereichen bestimmten Farben horizontal zu weiß verblassen und durch Hexadezimal in der CSS definiert werden. Ich wollte vermeiden, farbige Hintergrundbilder zu machen, falls ein Nichtentwicklermitglied meiner Firma eine neue Farbe nur mit Hexadezimal hinzufügen wollte.

Die Lösung, die ich fand, bestand darin, ein 24-Bit-PNG mit weißem Farbverlauf transparent zu machen, um die Breite des Bereichs, den ich machte, festzulegen.

habe ich dann dieses IE-nur die CSS bekommen hacken eine Hintergrundfarbe meiner Wahl zu machen, die auf weiß verblasst:

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

(der Hack verbessert werden könnte, aber es funktioniert für mich, einschließlich IE9)

Answer 6

Wickeln Sie den Inhalt mit einem DIV dann dies der CSS-Stil DIV hinzufügen ...

position: relative; 

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

Answer 7

Ich fand eine andere kostengünstige (Bit undurchsichtige) Lösung. Der Text wird wieder antialisiert, wenn der Textknoten umschlossen und jedes Element auf eine relative Position gesetzt wird. warum fragen Sie nicht ...

Nehmen wir an:

<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> 

Hoffnung, dass jemand da draußen hilft. In diesem Fall ist es nicht notwendig, Hintergrundbilder oder Derivate zu verwenden.

Arbeitsbeispiel in jsfiddle: http://jsfiddle.net/SLZpE/2/