我有一个元素需要在设计中处于垂直状态。我已经得到了这个CSS在IE9以外的所有浏览器上工作。我用IE7 & IE8过滤器:CSS3 transform:rotate;在IE9中
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
然而,这似乎使我在IE9元素透明和CSS3“变换分析” porperty似乎并没有做任何事情!
有没有人知道IE9中的旋转元素?
真的很感谢帮助!
W.
我有一个元素需要在设计中处于垂直状态。我已经得到了这个CSS在IE9以外的所有浏览器上工作。我用IE7 & IE8过滤器:CSS3 transform:rotate;在IE9中
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
然而,这似乎使我在IE9元素透明和CSS3“变换分析” porperty似乎并没有做任何事情!
有没有人知道IE9中的旋转元素?
真的很感谢帮助!
W.
标准CSS3旋转应在IE9工作,但我相信你需要给它一个供应商名称,像这样:
-ms-transform: rotate(10deg);
这是可能的,它可能无法在正常工作测试版;如果没有,请尝试下载当前预览版本(预览版7),这是测试版的后期修订版。我没有测试版的测试版,所以我无法确认它是否在该版本中。最终发布版本肯定会支持它。
我也可以确认在IE9中IE特定的filter
属性已经被丢弃。
[编辑]
人们要求进一步的文件。正如他们所说,这是相当有限的,但我确实找到了这个页面:http://css3please.com/这对于在所有浏览器中测试各种CSS3功能非常有用。
但是在IE9预览中测试这个页面上的旋转功能导致它崩溃得相当壮观。
但我已经做了一些独立的测试,在IE9中使用-ms-transform:rotate()
在我自己的测试页中,它工作正常。所以我的结论是该功能已经实现,但有一些错误,可能与动态设置有关。
用于哪些功能是在执行另外一个有用的参考点浏览器是www.canIuse.com - 见http://caniuse.com/#search=rotation
[编辑]
回想起这个古老的答案,因为我最近发现了一个黑客称为CSS Sandpaper这与问题相关并可能使事情变得更容易。
黑客实现了对旧版本IE的标准CSS transform
的支持。所以,现在你可以添加以下到你的CSS:
-sand-transform: rotate(10deg);
...并已在IE 6/7/8工作,而无需使用filter
语法。 (当然它仍然使用幕后的过滤器语法,但这使得管理起来更容易,因为它使用与其他浏览器类似的语法)
我也有在IE9转换的问题,我用-ms-transform: rotate(10deg)
,它didn没有工作。尽我所能,但问题是浏览器模式,为了使转换工作,您需要将兼容模式设置为“标准IE9”。
试试这个
<!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>
我知道这是老了,但我有同样的问题,发现这个职位,虽然它没有解释究竟什么是错的,它帮助我正确的答案 - 希望我的回答可以帮助其他可能与我有类似问题的人。
我有一个我想旋转垂直的元素,所以自然我添加了过滤器:对于IE8,然后是IE9的-ms-transform属性。我发现,具有-ms-transform属性并将滤镜应用于相同的元素会导致IE9渲染元素的效果很差。我的解决办法:
如果您使用的是变换origin属性,添加一个用于MS太(-MS-变换产地:左下角)。如果你没有看到你的元素,它可能是它在中轴上旋转,从而以某种方式离开页面 - 所以仔细检查一下。
将IE7 & 8的过滤器属性移动到单独的样式表中,并使用IE条件为IE9以下的浏览器插入该样式表。这样它不会影响IE9风格,所有应该工作正常。
确保使用正确的DOCTYPE标签;如果你有错误的IE9将无法正常工作。
感谢Spud!我现在要检查一下,然后回到你身边。简直不敢相信这里有多少关于这个在线的文档。 – wilsonpage 2011-02-01 16:45:22
@Spudley你能发表一个消息吗?我无法在MSDN上找到http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx – 2011-02-01 16:57:09
@ŠimeVidas和@pagewil - 你是对的,没有太多周围的文档。我发现它记录在这里:http://css3please.com/,但我应该注意,当我尝试使用rotate属性时,此页面崩溃了我的IE9预览副本。但是,我自己的独立测试已经证实该属性确实有效,并且在我的答案中引用了供应商前缀。 (鉴于崩溃,我认为它仍然存在错误!) – Spudley 2011-02-01 17:22:46