如何在 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中文网其他相关文章！