CSS3变换：旋转；在IE9中的兼容性问题

Question

CSS3变换：旋转；在IE9中的兼容性问题

internet-explorercssrotationinternet-explorer-9

77

我有一个元素在设计中需要垂直排列。除了IE9之外，我已经获得了使所有浏览器工作的CSS。我对IE7和IE8使用了滤镜：

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

然而，这似乎会使我的元素在IE9中变为透明，而CSS3的'transform'属性似乎没有任何作用！

有没有人知道在IE9中旋转元素的任何方法？

非常感谢帮助！

W。

- wilsonpage

5个回答

5

试试这个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>

- Alpesh Panchal

我已经在IE9、FireFox、Chrome和Safari上尝试了这段代码，它可以正常工作。 - Alpesh Panchal

4

我在IE9中也遇到了转换问题，我使用了-ms-transform: rotate(10deg)但是它没有起作用。尝试了所有的方法，但是问题在于浏览器模式，要使转换生效，您需要将兼容模式设置为"标准IE9"。

- Katherine Mokhova

1

在IE浏览器中按F12，选择更改浏览器模式为IE-9，然后检查此操作是否有效... - CSS Guy

3

为了让IE9支持垂直文本，您需要在文件的前两行使用以下内容关闭怪异模式：<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "" rel = "nofollow noreferrer">http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">。 - GlenPeterson

3

任何有效的文档类型都应该禁用怪异模式，例如：<!DOCTYPE html>。浏览器默认应该是IE9的，除非你已经更改了设置。 - superluminary

3

我知道这篇文章有点老了，但我遇到了同样的问题，找到了这篇文章。虽然它没有完全解释出问题所在，但是它帮助我找到了正确的答案，希望我的答案可以帮助其他人解决类似的问题。

我想要一个元素垂直旋转，因此我添加了IE8的filter属性和IE9的-ms-transform属性。但我发现将-ms-transform属性和filter应用于同一元素会导致IE9渲染该元素非常差。我的解决方案：

如果您正在使用transform-origin属性，请为MS添加一个（-ms-transform-origin: left bottom;）。如果您看不到您的元素，则可能是它正在其中心轴上旋转，从而离开页面 - 因此请仔细检查。
将IE7&8的filter属性移动到单独的样式表中，并使用IE条件将该样式表插入到小于IE9的浏览器中。这样它就不会影响IE9的样式，所有东西都应该正常工作。
确保使用正确的DOCTYPE标签；如果您使用错误的DOCTYPE标签，则IE9将无法正常工作。

- Steve

1

使用-ms-transform-origin是个好主意；我曾经为此苦恼了一段时间。 - danwild

0

可以使用：

 element.style['-ms-transform']='translate...'

- Mykola Marshalok Orestovych

1

你为什么更喜欢这个答案而不是被接受的答案呢？说到这里，被接受的答案也提供了一个很好的例子，说明在Stack Overflow上最有用和及时的回答所具有的详细程度和解释程度；那是需要努力追求的东西。 - Jeremy Caney

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Spudley · Accepted Answer

标准的CSS3旋转应该在IE9中有效，但我相信你需要给它加上厂商前缀，像这样：

  -ms-transform: rotate(10deg);

如果不能正常工作，请尝试下载当前的预览版本（预览版7）。我没有beta版本进行测试，无法确认是否在该版本中存在。最终发布版肯定支持此项功能。

我还可以确认IE特定的filter属性已在IE9中删除。

[编辑]
有人要求进一步的文档。正如他们所说，这相当有限，但我发现了这个页面：http://css3please.com/，可以用于在所有浏览器中测试各种CSS3特性。

但是，在IE9预览版上使用此页面上的旋转功能会导致它崩溃得非常惊人。

然而，我已经在我的测试页面中独立使用了-ms-transform:rotate()来测试IE9，并且它可以正常工作。因此，我的结论是该功能已实现，但存在一些错误，可能与动态设置有关。

另一个有用的参考点是www.canIuse.com——请参见http://caniuse.com/#search=rotation

[编辑]
重新激活这个老的答案，因为我最近发现了一个叫做CSS Sandpaper的 hack，它与问题相关，可能会让事情变得更容易。

这个hack实现了对旧版本IE的标准CSS transform支持。因此，现在您可以将以下内容添加到您的CSS中：

-sand-transform: rotate(10deg);

...并且在IE 6/7/8中使其正常工作，而无需使用filter语法。(当然它仍然在背后使用过滤器语法，但这使得管理变得更加容易，因为它使用类似于其他浏览器的语法)