selectivizr兼容ie8以下的css3僞類選擇器以後得ie9hack問題

           爲了實現ridio 選中ridio 樣子自動變用了input:checked + .ridio {background-image:url(../img/radio1.png);}實現,但是後來發現:checked 選擇器ie8以下不能識別,最近從一個大神那發現了了一個可以使ie8版本識別css3僞類和屬性選擇器selectivizr,地址爲http://www.zhangxinxu.com/wordpress/2010/09/selectivizr-%E8%AE%A9ie6ie7ie8%E6%94%AF%E6%8C%81css3%E4%BC%AA%E7%B1%BB%E5%92%8C%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/


        實際使用時發現,ridio 選中樣式不會隨着點擊選中而改變樣子,看起來好像就沒有什麼作用。後來發現,原來在ie8下我的Input隱藏了display:none;這種寫法好像ie8默認不能點擊,只能用filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);來透明隱藏住按鈕,但是input所佔的空間還是存在的,這樣看起來比較醜,但是目前也沒啥比較好的解決方法,只想這個樣式在ie8以下使用就好,ie9以上還是用display:none;來實現。

    問題來了,之前是:root來區分ie9的hack的,結果selectivizr支持了:root屬性,只能換了另一種寫法

    

.hide{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
@media all and (min-width:0) {
    .hide{display:none;}
}


講到這個就突然想起之前behavior\9\0怎麼也識別不了的原因,我估摸着是behavior只能ie9以下才能識別,而\9\0是ie9和ie10才能識別,所以不能作用吧


做個備忘錄:

css hack:

http://blog.csdn.net/freshlover/article/details/12132801

http://www.webkaka.com/tutorial/html/2015/080912/



   



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章