[英]CSS3 rotation causing problems IE9
我在IE9中使用以下内容:
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
它以旋转文本的方式工作,但奇怪的是它无缘无故地给元素一个黑色背景?!
CSS:
.view-see-the-difference-in-your-sector .views-field-title span {
display: block;
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom: 1;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
width: 200px;
}
另请注意,除了过滤器之外,我有所有浏览器旋转的原点。 这里使用的语法是什么?
我发现这个黑客可以解决我的问题。 你应该添加filter:none; 风格到黑色背景的容器。 不知何故,ie9不支持ie8使用的过滤器样式,所以你必须禁用它。 在你的情况下:
.ie9 .view-see-the-difference-in-your-sector .views-field-title span {
filter:none;
}
你必须检测你的浏览器是否是ie9并将此类添加到某个父节点,如body标签。
我们使用的是:transform:rotate(45deg); 不适用于Chrome和IE9。
首先尝试:尝试在IE中的CSS旋转属性中给出的解决方案,它在IE9中不起作用。
i.e:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
解答:最终解决方案即:
-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg);
-ms-transform: rotate(45deg);
ms-transform: rotate(45deg); /* This Line did the trick for IE9
从以下URL找到解决方案: http : //bugs.jquery.com/ticket/8346
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.