为啥这个元素旋转不起作用？
Posted
技术标签:
【中文标题】为啥这个元素旋转不起作用？【英文标题】：Why isn't this element rotation working?为什么这个元素旋转不起作用？ 【发布时间】：2013-04-26 19:07:07 【问题描述】：我正在尝试在 IE8 中旋转文本。根据this 的回答，应该可以像以下示例中尝试的那样旋转元素：
<!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生成器得到号码）
如果我使用开发工具检查 p 元素，我可以看到它受到了某种影响，因为显示所选元素的蓝色边框被正确旋转（但实际元素没有被旋转），请参见下图。
编辑： 为了澄清，这是没有过滤器语句的样子：
【问题讨论】：
你是否只尝试过filter:，前面没有-ms-？
是的，没有供应商前缀什么都不会发生。 （连图片中显示的旋转都没有）
只是来自生成器的注释：/* IE8+ - 必须在一行，不幸的是 */ 你的声明在一行吗？
好奇，你是在 IE8 文档模式下运行的 IE10 中测试这个，还是在合法的 IE8 实例中测试？
IE10运行IE8模式
【参考方案1】：
您当前的标记有效，问题是您必须在 IE10 中启用旧版过滤器才能在 IE8 模式下运行的 IE10 中正确呈现您的结果。
因此，答案是启用旧版过滤器：http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx
转到“设置[齿轮]”>>“Internet选项”>>“安全” 然后单击“自定义级别”并在结果窗口窗格中向下滚动以找到“渲染旧过滤器”选项。启用它。
【讨论】：
【参考方案2】：鉴于您已在 IE10 的 IE8 兼容模式下测试的 cmets 中澄清，而不是 IE8 的真实副本，这变得更容易回答。你的问题的答案是explained here on MSDN
简而言之，IE10 认为filter 样式已过时，即使在兼容模式下也默认禁用它。可以启用，但只能由最终用户启用。
IE9 不受此影响； filter 样式在 IE9 中运行良好，但在 IE10 中会出现问题。
引用：
对于 Internet Explorer 10，DX 过滤器在以下文档模式下不起作用（已过时）：
怪癖模式 IE10 标准模式对于其他文档模式，DX 过滤器（默认情况下）对 Internet 区域禁用，而对本地 Intranet 和受信任的站点区域启用。这会影响以下文档模式：
IE9 标准模式 IE8 标准模式 IE7 标准模式 IE5（怪癖）模式最终用户可以更改这些设置（仅适用于这些文档模式），方法是使用 Internet 选项更改相关区域的安全设置。管理员也可以使用组策略。
注意出于安全和性能原因，强烈建议不要这样做。此外，网页无法修改这些设置（通常出于相同的原因）。
这样做的结果是，对于 IE10，您无法在兼容模式下可靠地使用 filter 样式。
这意味着：
使用兼容模式来测试您的代码在较旧的 IE 中是否有效并不是一个好的测试。您确实需要使用旧 IE 版本的真实副本才能进行准确的测试。
让您的用户使用兼容模式显示您的网站是个坏主意。使用X-UA-Compatible 元标记强制他们以 IE 最佳呈现模式查看网站。
【讨论】：
感谢您的描述。我绝对同意你的第一点（特别是在这花了我一天的时间之后）。我不知道第二点是可能的，但我认为这不会是一个大问题。因为除了测试目的之外，谁会在兼容模式下运行 IE？ @rob - IE 中的配置设置告诉它在某些情况下默认使用兼容模式。一些企业用户可能启用了这些设置（最终用户甚至可能不知道），这意味着您无法确定您的网站将以何种模式呈现给所有用户。您可以使用X-UA-Compatible 覆盖这些设置。
我不知道这个...在我的标题中添加了<meta http-equiv="X-UA-Compatible" content="IE=10; IE=9; IE=8; IE=7; IE=EDGE" /> :)
@rob - 我只会使用ie=edge 选项；这就是你所需要的。这告诉 IE 使用可用的最佳模式，无论它碰巧是什么版本，这就是我们通常想要的。除非您确实希望 IE 使用兼容模式，否则其他选项是不必要的。以上是关于为啥这个元素旋转不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
为什么当旋转木马内部的某个元素被调用时，Bootstrap 4旋转木马暂停功能不起作用？
VueJS：使用 v-html 来 appendChild 不起作用，为啥？