CSS3旋转在IE9中引起问题

Question

我正在使用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;
}

还要注意，除了过滤器旋转之外，我还有所有浏览器旋转的起点。这里应该使用什么正确的语法？

- Rick Donohoe

---

https://developer.mozilla.org/zh-CN/docs/CSS/transform 表明IE9支持“-ms-transform”。顺便提一句，IE9应该忽略“filter”，因为“-ms-filter”接管了它的位置 :) - biziclop

可能是如何在IE9中使用dropshadow滤镜时消除文本上的黑色伪影的重复问题。 - Paul Sweatte

Answer 1

我发现了一个解决这个问题的窍门。您应该为具有黑色背景的容器添加filter:none;样式。不知何故，ie9不支持用于ie8的filter样式，因此您必须禁用它。在您的情况下：

.ie9 .view-see-the-difference-in-your-sector .views-field-title span  {
   filter:none;
}

你需要检测浏览器是否为ie9，并向一些父节点添加此类，例如body标签。

- Kaloyan Stamatov

---

我记不得我当时在哪里或测试了什么，因为这个问题很久以前了，但如果你有任何链接或其他支持你答案的东西，我会投票并接受。 - Rick Donohoe

好的，这里是问题解决后的链接： http://apps.radical.ie/st/centra/range_2013/phase_2/tab/。 很抱歉回复晚了，但在项目完成之前不能展示。 - Kaloyan Stamatov

Answer 2

我们使用的是：transform: rotate(45deg); 在Chrome和IE9中不起作用。

第一次尝试：尝试了在CSS旋转属性中提供的解决方案，链接为CSS rotate property in IE，但在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

从以下网址找到了解决方案：http://bugs.jquery.com/ticket/8346

- Kartikay Tripathi