CSS3旋转导致IE9出现问题

Question

I am using the following in IE9:

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

It works in the way it rotates the text, but oddly it gives the element a black background for no reason?!

The 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;
}

Also notice I have an origin for all browser rotations apart from the filter one. What is the correct syntax to use here?

Answer 1

I find this hack that fix the problem for me. You should add filter:none; style to the container with black background. Somehow ie9 does not support filter style used for ie8 so you have to disable it. In your case:

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

You have to detect if your browser is ie9 and add this class to some parent node like the body tag.

Answer 2

We were using : transform: rotate(45deg); not working in Chrome and IE9.

First Try : Tried solution given in CSS rotate property in IE , it was not working in 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);  

Solution : Final solution ie:

        -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

Found the solution from following URL : http://bugs.jquery.com/ticket/8346