2012-11-12 20 views
5

Ho notato in IE9 che l'utilizzo della matrice DXIImageTransform consente di pixelare il testo ruotato. Non ho questo problema in IE8 o 7. Normalmente userei le opzioni css3 in IE9 ma per ragioni al di fuori del mio controllo, la pagina esegue il rendering in modalità quirks (iframe html5 valido incorporato in una pagina di terze parti senza doctype)DXIMageTransform.Microsoft.Matrix sfocata in IE9

Questo è il codice che sto utilizzando:

<!--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, il risultato ruotato il testo è liscia, ma in IE9 è molto pixel. Confrontare a questo (che non funziona in quirks mode)

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

per vederlo in azione, date un'occhiata a questo violino in IE9 http://jsfiddle.net/U4CCD/3/

La mia domanda, come posso ruotare il testo in IE9, in modalità Quirks, non sembra tutto pixelato e sfocato. Perché la trasformazione della matrice inizia a succhiare in IE9?

Se sei abbastanza fortunato da non dover eseguire IE9, questo è quello che sto vedendo. L'esempio più chiaro è come appare in IE8 e come appare usando le trasformazioni css3.

IE9 sucks

risposta

4

In definitiva ho trovato che questo semplicemente non potrebbe essere fatto con la mia configurazione corrente. Tuttavia, ero in grado di aggirarlo avvolgendo la mia pagina html5 valida in un oggetto che era poi incorporato nell'iframe. In IE 9 questo sembrava consentire alla mia pagina di essere visualizzata nell'iframe in modalità standard e utilizzare le trasformazioni SVG che sembrano pulite. Ho creato il seguente script di wrax:

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