为什么这个元素旋转不起作用?-前端问题

Why isn#39;t this element rotation working?(为什么这个元素旋转不起作用?)

本文介绍了为什么这个元素旋转不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在 IE8 中旋转文本.根据

转到设置[齿轮]">>Internet选项">>安全"然后单击自定义级别"并在结果窗口窗格中向下滚动以找到渲染旧过滤器"选项.启用它.

I'm trying to rotate text in IE8. According to this answer, it should be possible to rotate an element as tried in the following example:

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

(got the numbers from this generator)

If I inspect the p element with the dev tools I can see it is somehow affected, because the blue border showing the selected element is rotated correctly (but the actual element is not being rotated), see image below.

Edit: For clarification, this is how it looks without the filter statement:

解决方案

Your current markup works, the problem is that you have to enable legacy filters in IE10 to properly render your results in IE10 running in IE8-mode.

So, the answer then is to enable legacy filters: http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx

Go to "Settings [Gear]" >> "Internet Options" >> "Security" Then click "Custom Level" and scroll way down in the resulting window-pane to find the "Render legacy filters" option. Enable it.

这篇关于为什么这个元素旋转不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！