2012-11-12 22 views
5

Ich habe in IE9 festgestellt, dass die Verwendung der Matrix DXIImageTransform gedreht Text pixelate. Ich habe dieses Problem nicht in IE8 oder 7. Normalerweise würde ich die css3-Optionen in IE9 verwenden, aber aus Gründen außerhalb meiner Kontrolle rendert die Seite im Quirks-Modus (gültige html5 iframe in eine 3rd-Party-Seite ohne Doctype eingebettet)DXIMageTransform.Microsoft.Matrix verschwommen in IE9

Dies ist der Code ich verwende:

<!--Looks like crap but is my only option in quirks mode--> 
<span style="position:absolute; 
    filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
    M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);"> 
    Does this make my butt look pixelated?  
</span> 

in IE8 drehte sich die Ergebnistext glatt ist, aber in IE9 ist es sehr pixelig. Vergleichen Sie dazu (was nicht im Quirks-Modus funktioniert)

<!-- looks great but doesn't work in quirks mode--> 
<span style="position:absolute; top:150px; -ms-transform: rotate(-45deg);"> 
    Does this make my butt look pixelated? 
</span> 

Um es in Aktion sehen, die diese Geige in IE9 http://jsfiddle.net/U4CCD/3/

Meine Frage, wie kann ich Text drehen in IE9, im Quirks-Modus, sieht das nicht pixelig und verschwommen aus. Warum hat die Matrix-Transformation begonnen, IE9 anzusaugen?

Wenn Sie Glück haben, IE9 nicht zu laufen, das ist, was ich sehe. Das klarere Beispiel ist, wie es in IE8 aussieht und wie es mit css3-Transformationen aussieht.

IE9 sucks

Antwort

4

Letztendlich fand ich, dass dies einfach nicht mit meiner aktuellen Konfiguration erfolgen. Ich konnte es jedoch umgehen, indem ich meine gültige html5-Seite in ein Objekt verpackte, das dann in den iframe eingebettet wurde. In IE 9 schien dies zu ermöglichen, dass meine Seite im iframe im Standardmodus rendert und die SVG-Transformationen verwendet, die sauber aussehen. Ich habe das folgende Wrapper-Aspx-Skript erstellt:

<%@ Page Language="C#" %> 

<% 
    string url = "app/path"; 
    if(!String.IsNullOrEmpty(Request.QueryString["path"])) 
     url = HttpUtility.UrlDecode(Request.QueryString["path"]); 

    url += "?i=1"; 
    if(!String.IsNullOrEmpty(Request.QueryString["id"])) 
     url += "&id=" + Request.QueryString["id"]; 

    if(Request.Browser.Browser!="IE"||Request.Browser.MajorVersion!=9) { 
     Response.Redirect(url); 
    } 
    url += "&quirky=1"; 
%> 
<html> 
<head><title></title> 
</head> 
<body style="width:100%; height:100%; margin:0; padding:0; overflow:hidden;"> 
<object type="text/html" data="<% =url %>" style="overflow:hidden; width:100%; height:100%"></object> 
</body> 
</html>