Filter filter compatible with IE9 hack: root instance

Requirements: implementing a layer of rotation 270deg,ie series browser full compatibility

Source code:

The code is as follows

Copy Code

<!--[if LTE IE 8]>     <style>     #demo {filter:progid:d XImageTransform.Microsoft.BasicImage (rotation=3);}     </style> <![ Endif]--> <style>     #demo {         width:300px; Height:200px;background-color: #FF80C0; margin:200px;        -moz-transform:translate ( -226px,226px) rotate (270deg);        -webkit-transform:translate ( -226px,226px) rotate (270deg);        -ms-transform:translate ( -226px,226px) rotate (270deg);        -o-transform:translate ( -226px,226px) rotate (270deg);    } </style> <div id= "Demo"     do a demo test under </div>

IE9 the rotation angle is incorrect!

The problem is: the filter and-ms-transform are repeatedly applied under

IE9, resulting in incorrect rotation angle

Workaround:

Method 1:

Remove filter css under IE9:
: Root #demo {filter:progid:d XImageTransform.Microsoft.BasicImage (rotation=0);} The Css3:root selector is used here in

: All major browsers support: Root selector, except IE8 and earlier versions, while filters Filterk only IE9 and lower versions of IE to support, IE10 began to discard and not support filter This just makes use of: root to implement the hack!! for IE9
The Ie10 or later version of IE is installed, and the IETester new IE9 mode tab can be used to see how the above code works.
(Note: The Ie10 or later version of IE, even if the document mode to IE9, you will find that the above code also shows the correct, reasonable explanation is: Ie10 started abandoned does not support the filter, even if the document mode to Ie9,filter will not take effect! In addition to mention the CSS 9 writing is for all versions of IE hack, online is only for ie6~8 hack saying is wrong!

Method 2:

Use the IE unique condition annotation to extract the filter style into the annotation, because the conditional annotation can only be written to the page, so it is recommended that Method 1 resolve the " IE9 the filter and the-ms-transform will be repeated, causing the rotation angle to be incorrect.

Of course, the source code for method 2 should be released:

code is as follows

copy code

<!--[if LTE IE 8]> <style> #demo {filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);} </style> <![ Endif]--> <style> #demo { Width:300px;height:200px;background-color: #FF80C0; margin:200px; -moz-transform:translate ( -226px,226px) rotate (270deg); -webkit-transform:translate ( -226px,226px) rotate (270deg); -ms-transform:translate ( -226px,226px) rotate (270deg); -o-transform:translate ( -226px,226px) rotate (270deg); } </style> <div id= "Demo" To do a demo test under </div>