Question

我正在尝试在IE8中旋转文本。根据{{3}}回答，应该可以旋转元素，如以下示例所示：

<!DOCTYPE html>
<html>
<head>
    <style>
        #enclosing {
            width: 20px;
            height: 100px;
            border: 1px solid;
        }

        #rotated {
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="enclosing">
        <p id="rotated">rotated</p>
    </div>
</body>
</html>

（从this生成器获得数字）

如果我用dev工具检查p元素，我可以看到它受到某种影响，因为显示所选元素的蓝色边框正确旋转（但实际元素没有被旋转），见下图。

ispected with dev tools

修改为了澄清，这是它没有filter语句的样子：

without filter statement

Answer 1

您当前的标记有效，问题是您必须在IE10中启用旧版过滤器才能在IE8模式下运行的IE10中正确呈现结果。

因此，答案是启用旧版过滤器：http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx

转到“设置[装备]”＆gt;＆gt; “互联网选项”＆gt;＆gt; “安全” 然后单击“自定义级别”并在生成的窗口窗格中向下滚动以查找“渲染旧版过滤器”选项。启用它。

Enable legacy filters in IE10

Answer 2

鉴于你已经在评论中澄清了你在IE10的IE8 Comaptibility模式中测试，而不是IE8的真实副本，这变得更容易回答。您的问题的答案是explained here on MSDN

简而言之，IE10认为filter样式已过时，默认情况下即使在兼容模式下也会禁用它。可以启用，但只能由最终用户启用。

IE9不受此影响; <{1}}样式在IE9中运行良好，但对于IE10，你会遇到问题。

引用：

对于Internet Explorer 10，在以下文档模式下，DX过滤器将无法工作（已过时）：


Quirks模式

IE10标准模式


对于其他文档模式，默认情况下，DX过滤器已禁用Internet区域，并启用了“本地Intranet”和“受信任的站点”区域。这会影响以下文档模式：


IE9标准模式

IE8标准模式

IE7标准模式

IE5（Quirks）模式


最终用户可以使用“Internet选项”更改这些设置（仅适用于这些文档模式），以更改相关区域的安全设置。管理员也可以使用组策略。

注意出于安全和性能原因，强烈建议不要这样做。此外，网页无法修改这些设置（通常出于同样的原因）。

这样做的结果是，对于IE10，您无法在兼容模式下可靠地使用filter样式。

这意味着：

使用兼容模式测试您的代码在较旧的IE中是否有效并不是一个好的测试。您确实需要使用旧IE版本的真实副本才能进行准确的测试。
允许用户使用兼容模式显示您的网站是一个坏主意。强制他们使用filter元标记以IE最佳渲染模式查看网站。

为什么这个元素旋转不起作用？

2 个答案: