在IE9中DXIMageTransform.Microsoft.Matrix模糊

时间:2012-11-12 20:49:08

标签: html css internet-explorer internet-explorer-9 quirks-mode

我在IE9中注意到使用矩阵DXIImageTransform将像素化旋转文本。我在IE8或7中没有这个问题。通常我会在IE9中使用css3选项,但由于我无法控制的原因,页面以怪异模式呈现(有效的html5 iframe嵌入第三方页面而没有doctype)

这是我正在使用的代码:

<!--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中,它非常像素化。与此相比(在怪癖模式下不起作用)

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

1 个答案:

答案 0 :(得分: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>