6

IE9 で、マトリックス DXIImageTransform を使用すると、回転したテキストがピクセル化されることに気付きました。IE8 または 7 ではこの問題は発生しません。通常は IE9 で css3 オプションを使用しますが、制御できない理由により、ページが quirks モードでレンダリングされます (Doctype のないサードパーティ ページに埋め込まれた有効な html5 iframe)。

これは私が使用しているコードです:

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

IE8 では、テキストを回転した結果は滑らかですが、IE9 では非常にピクセル化されています。これと比較してください (quirks モードでは機能しません)。

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

実際の動作を確認するには、IE9 http://jsfiddle.net/U4CCD/3/でこのフィドルを確認してください。

私の質問は、IE9 のクワーク モードでテキストを回転させるにはどうすればよいですか。行列変換が IE9 で吸い込まれ始めたのはなぜですか?

幸運にも IE9 を実行していない場合は、これが表示されます。より明確な例は、IE8 でどのように見えるか、および css3 変換を使用してどのように見えるかです。

IE9は最悪

4

1 に答える 1

4

最終的に、これは現在の構成では実行できないことがわかりました。ただし、有効なhtml5ページをオブジェクトでラップしてiframeに埋め込むことで、この問題を回避することができました。IE 9では、これにより、私のページを標準モードのiframeでレンダリングし、きれいに見えるSVG変換を使用できるようになりました。次のラッパーaspxスクリプトを作成しました。

<%@ 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>
于 2012-12-19T18:31:25.800 に答える