IE9 中的 DXIMageTransform.Microsoft.Matrix 模糊

Posted

技术标签:

【中文标题】IE9 中的 DXIMageTransform.Microsoft.Matrix 模糊【英文标题】:DXIMageTransform.Microsoft.Matrix blurry in IE9 【发布时间】:2012-11-01 07:50:37 【问题描述】:

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

这是我正在使用的代码:

<!--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 中旋转文本,在 quirks 模式下,这看起来并不全是像素化和模糊的。为什么矩阵变换在 IE9 中开始吸水?

如果你有幸没有运行 IE9,这就是我所看到的。更清晰的示例是它在 IE8 中的外观以及使用 css3 转换的外观。

【问题讨论】:

【参考方案1】:

最终我发现,我目前的配置根本无法做到这一点。但是,我能够通过将我的有效 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>

【讨论】:

以上是关于IE9 中的 DXIMageTransform.Microsoft.Matrix 模糊的主要内容,如果未能解决你的问题,请参考以下文章

IE9中的innerHTML追加

IE9 - 主页中的怪癖模式和特定 iframe 中的“Internet Explorer 9 标准”

IE9 中的 css3 文本阴影

如何禁用 IE9 中的兼容模式按钮?

表格排序不适用于 ie9、firefox 中的日期

IE8/IE9 中的跨域标头