IE中的CSS旋转属性

问题描述

我想将 DIV 旋转到一定程度.在 FF 中它可以运行，但在 IE 中我遇到了问题.

I want to rotate the DIV to a certain degree. In FF it functions but in IE I am facing a problem.

例如在以下样式中，我可以将 rotation=1 设置为 4

For example in the following style I can set rotation=1 to 4

 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

这意味着 DIV 将旋转到 90 或 180 或 270 或 360 度.但是如果我只需要将 DIV 旋转 20 度，那么它就不再起作用了.

This means that the DIV will be rotated to 90 or 180 or 270 or 360 degree. But if I need to rotate the DIV only 20 degrees, then it doesn't work anymore.

如何在 IE 中解决这个问题?

How may I solve this problem in IE?

推荐答案

要在 IE 中旋转 45 度，您需要在样式表中添加以下代码:

To rotate by 45 degrees in IE, you need the following code in your stylesheet:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

您会从上面注意到 IE8 与 IE6/7 的语法不同.如果要支持所有版本的 IE，则需要提供这两行代码.

You’ll note from the above that IE8 has different syntax to IE6/7. You need to supply both lines of code if you want to support all versions of IE.

弧度中有可怕的数字；如果您想使用 45 度以外的角度(有 tutorials 如果你在网上找的话).

The horrible numbers there are in Radians; you’ll need to work out the figures for yourself if you want to use an angle other than 45 degrees (there are tutorials on the internet if you look for them).

另外请注意，IE6/7 语法由于过滤器字符串中未转义的冒号符号而导致其他浏览器出现问题，这意味着它是无效的 CSS.在我的测试中，这会导致 Firefox 忽略过滤器之后的所有 CSS 代码.这是您需要注意的事情，因为如果您被它抓住，可能会导致数小时的混乱.我通过将特定于 IE 的内容放在单独的样式表中解决了这个问题，其他浏览器没有加载.

Also note that the IE6/7 syntax causes problems for other browsers due to the unescaped colon symbol in the filter string, meaning that it is invalid CSS. In my tests, this causes Firefox to ignore all CSS code after the filter. This is something you need to be aware of as it can cause hours of confusion if you get caught out by it. I solved this by having the IE-specific stuff in a separate stylesheet which other browsers didn’t load.

当前所有其他浏览器(包括 IE9 和 IE10 — yay！)都支持 CSS3 transform 样式(尽管通常带有供应商前缀)，因此您可以使用以下代码在所有浏览器中实现相同的效果其他浏览器:

All other current browsers (including IE9 and IE10 — yay!) support the CSS3 transform style (albeit often with vendor prefixes), so you can use the following code to achieve the same effect in all other browsers:

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

希望对您有所帮助.

由于这个答案仍在投票中，我觉得我应该用一个名为 CSS Sandpaper，即使在较旧的 IE 版本中，您也可以使用(接近)标准 CSS 代码进行旋转.

Since this answer is still getting up-votes, I feel I should update it with information about a JavaScript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.

将 CSS Sandpaper 添加到您的网站后，您应该能够为 IE6–8 编写以下 CSS 代码:

Once you’ve added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6–8:

-sand-transform: rotate(40deg);

比您通常需要在 IE 中使用的传统 filter 样式要容易得多.

Much easier than the traditional filter style you'd normally need to use in IE.

还要注意 IE9(并且仅 IE9)的一个额外的怪癖，它支持标准 transform 和旧样式 IE -ms-filter.如果您同时指定了它们，这可能会导致 IE9 完全混淆，并在元素本来所在的位置呈现一个纯黑框.最好的解决方案是使用上面提到的 Sandpaper polyfill 来避免 filter 样式.

Also note an additional quirk specifically with IE9 (and only IE9), which supports both the standard transform and the old style IE -ms-filter. If you have both of them specified, this can result in IE9 getting completely confused and rendering just a solid black box where the element would have been. The best solution to this is to avoid the filter style by using the Sandpaper polyfill mentioned above.

这篇关于IE中的CSS旋转属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！