問題描述

我想將 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模板網！