CSS3转换:旋转; 在IE9中

我有一个元素需要在我所做的设计中保持垂直。 我已经得到了这个CSS在IE9以外的所有浏览器上工作。 我使用IE7和IE8的过滤器:

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

然而,这似乎使我的元素在IE9中透明,而CSS3'变形'属性似乎没有任何作用!

有没有人知道IE9中的旋转元素?

真的很感谢帮助!

W.


标准的CSS3旋转应该在IE9中工作,但我相信你需要给它一个供应商前缀,如下所示:

  -ms-transform: rotate(10deg);

它可能不适用于测试版; 如果没有,请尝试下载当前预览版本(预览版7),这是测试版的后期修订版。 我没有测试版的测试版,所以我无法确认它是否在该版本中。 最终发布版本肯定会支持它。

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

[编辑]
人们已经要求进一步的文件。 正如他们所说,这是非常有限的,但我确实找到了这个页面:http://css3please.com/这对于在所有浏览器中测试各种CSS3功能非常有用。

但是在IE9预览中测试这个页面上的旋转功能导致它崩溃得相当壮观。

不过,我在我自己的测试页中使用了-ms-transform:rotate()在IE9中做了一些独立测试,并且工作正常。 所以我的结论是该功能已经实现,但有一些错误,可能与动态设置有关。

另一个有用的参考点,其中的功能在哪些浏览器是www.canIuse.com实施 - 请参阅http://caniuse.com/#search=rotation

[编辑]
恢复这个旧的答案,因为我最近发现了一个名为CSS Sandpaper的黑客攻击,这个黑客攻击与问题相关,并且可以让事情变得更简单。

hack实现了对旧版IE的标准CSS transform支持。 所以现在你可以添加以下内容到你的CSS中:

-sand-transform: rotate(10deg);

...并在IE 6/7/8中工作,而不必使用filter语法。 (当然,它仍然使用幕后的过滤器语法,但这使得它更容易管理,因为它使用与其他浏览器类似的语法)


尝试这个

<!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>

我在IE9中也遇到了转换问题,我使用了-ms-transform: rotate(10deg) ,但它不起作用。 尽我所能,但问题是浏览器模式,为了使转换工作,您需要将兼容模式设置为“标准IE9”。

链接地址: http://www.djcxy.com/p/52461.html

上一篇: CSS3 transform: rotate; in IE9

下一篇: How to compile cairo in ios platform