wil*_*age 77 css internet-explorer rotation css3 internet-explorer-9
在我所做的设计中,我有一个需要垂直的元素.我有这个css在IE9以外的所有浏览器中工作.我使用了IE7和IE8的过滤器:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
然而,这似乎在IE9中使我的元素透明,并且CSS3'tranform'属性似乎没有做任何事情!
有谁知道IE9中的旋转元素？
真的很感激帮助!
W.
Spu*_*ley 137
标准CSS3旋转应该在IE9中工作,但我相信你需要给它一个供应商前缀,如下所示:
-ms-transform: rotate(10deg);
它有可能在测试版中不起作用; 如果没有,请尝试下载当前预览版本(预览版7),这是测试版的后续版本.我没有要测试的beta版本,因此我无法确认它是否在该版本中.最终版本肯定会支持它.
我还可以确认filterIE9中已删除特定于IE的属性.
[编辑]
人们要求进一步的文件.正如他们所说,这是非常有限的,但我确实找到了这个页面:http://css3please.com/,这对于测试所有浏览器中的各种CSS3功能非常有用.
但是在IE9预览版中测试此页面上的旋转功能会导致它崩溃得相当惊人.
但是我已经-ms-transform:rotate()在我自己的测试页面中使用IE9 进行了一些独立测试,并且它运行正常.所以我的结论是该功能已实现,但有一些错误,可能与动态设置有关.
另一个有用的参考点,其中的功能是在哪些浏览器中实现的www.canIuse.com - 请参阅http://caniuse.com/#search=rotation
[编辑]
恢复这个旧答案,因为我最近发现了一个名为CSS Sandpaper的黑客,它与问题相关并可能使事情变得更容易.
该hack实现transform了对旧版IE 的标准CSS的支持.所以现在你可以在CSS中添加以下内容:
-sand-transform: rotate(10deg);
...并使其在IE 6/7/8中工作,而无需使用filter语法.(当然它仍然在幕后使用过滤器语法,但这使得它更容易管理,因为它使用与其他浏览器类似的语法)
小智 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>