如何在 Internet Explorer 中將 DIV 元素旋轉特定角度？

在 IE 中使用 CSS 旋轉屬性旋轉 DIV

CSS 旋轉屬性是用於轉換網頁上元素的強大工具。但是，IE 使用者在嘗試將元素旋轉特定角度時可能會遇到問題。

問題

為了說明問題，請考慮以下樣式：

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

此樣式將 DIV 旋轉至 90、180、270 或 360 度。但是，如果目標是僅將 DIV 旋轉 20 度，則此方法無效。

解決方案

要在IE 中將元素旋轉特定角度，需要以下程式碼：

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 版本，這兩行程式碼都是必需的。

要注意的是，程式碼中的數字代表弧度，而不是度數。因此，可能需要將所需的角度轉換為弧度以實現所需的旋轉。

其他瀏覽器相容性

所有其他現代瀏覽器，包括 IE9 和 IE10，都支援 CSS3 轉換樣式。這可以使用以下程式碼實現元素的旋轉：

-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 字元無效，IE6/7 語法可能會在其他瀏覽器中導致問題。為了避免此問題，可以將特定的 IE 樣式放置在單獨的樣式表中。
• CSS Sandpaper 是一個 JavaScript 函式庫，即使在較舊的 IE 版本中，也可以使用標準 CSS 程式碼旋轉。
• IE9 有一個怪癖，即同時使用標準變換和 -ms-filter 樣式可能會導致渲染問題。為了避免這種情況，建議使用 CSS Sandpaper polyfill 來代替。

以上是如何在 Internet Explorer 中將 DIV 元素旋轉特定角度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！