在IE9中DXIMageTransform.Microsoft.Matrix模糊
Cod*_*ian 5 html css internet-explorer quirks-mode internet-explorer-9
我在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变换的外观.
最终我发现以我当前的配置根本无法完成此操作。不过，我可以通过将有效的 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>