css中filter濾鏡，ie9 hack寫法：:root 選取器妙用

需求： 實現一個層旋轉270deg，ie系列瀏覽器全相容

源碼：

代碼如下

複製代碼

<!--[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">  做個DEMO測試下 </div>

問題：

贊助商連結
ie9下旋轉角度不正確！

問題所在：

ie9下會重複應用filter和 -ms-transform,會導致旋轉角度不正確

解決方案：

方法1：

取消ie9下的濾鏡css：
:root #demo{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);}

這裡用到了CSS3 :root 選取器：所有主流瀏覽器均支援 :root 選取器，除了 IE8 及更早的版本，而濾鏡filterk只有ie9以及更低的ie版本才支援，ie10開始已廢棄不支援filter，這樣剛好可利用:root來實現針對ie9的hack!!
裝了ie10或更高版本的ie，可用ietester建立ie9模式標籤查看上面代碼運行效果。
(注意：裝了ie10或更高版本的ie，即使將文檔模式調成ie9，會發現上面 的代碼也顯示正確，合理的解釋是：ie10開始已廢棄不支援filter，即使文檔模式調成ie9，filter也不會生效！另外提一下 css 9 寫法是針對ie所有版本的hack寫法，網上說的只是針對ie6~8的hack說法是錯誤的！)

方法2：

用ie專屬條件注釋，把filter樣式抽出來放到注釋裡面去，鑒於條件注釋只能寫入到頁面上，所以還是推薦方法1去解決”ie9下會重複應用filter和 -ms-transform,會導致旋轉角度不正確“這個問題

當然，還要放出方法2的源碼：

代碼如下

複製代碼

<!--[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"> 做個DEMO測試下 </div>