CSS hack浏览器兼容一览表
生活随笔
收集整理的這篇文章主要介紹了
CSS hack浏览器兼容一览表
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS hack是指我們為了兼容各瀏覽器,而使用的特別的css定義技巧。這是國外摘來的一張CSS hack列表,顯示了各瀏覽器對css hack的支持程度,對我們制作兼容網頁非常有幫助。
?
?
屏蔽IE瀏覽器(也就是IE下不顯示)select:empty {font:12px? !important;} /*safari可見*/
這里select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
當面臨需要只針對IE7與IE5.0做樣式的時候就可以采用這個HACK。
當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。
這個地方要特別注意很多博客都寫成了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body? select {…}
這句與上一句的作用相同。
這里主要是通過CSS注釋分開一個屬性與值,注釋在冒號前。
這里與上面一句不同的是在選擇符與花括號之間多了一個CSS注釋。不屏蔽IE5.5
這一句是在上一句中去掉了屬性區的注釋。只有IE5不識別,IE5.5可以識別。
盒模型的清除方法不是通過!important來處理的。這點要明確。
在Firefox中,當子級都為浮動時,那么父級的高度就無法完全的包住整個子級,那么這時用這個清除浮動的HACK來對父級做一次定義,那么就可以解決這個問題。
這個是在越出長度后會自行的截掉多出部分的文字,并以省略號結尾,很好的一個技術。只是目前Firefox并不支持。
針對Opera瀏覽器做單獨的設定。
以上都是寫CSS中的一些HACK,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器,只有IE5.x可見i{content:"/";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
??? @import "ie5mac.css";
/**/
所有的IE可識別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以識別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5都可以識別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可識別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識別
以上內容可能并不全面,歡迎大家能和我一起把這些技巧都匯總起來,為以后工作的查詢提供一個方便,同時在這里感謝那些研究出這些HACK的作者們。
?
先來說一下什么是css hack ,寫了這么久的div+css代碼,我還真不知道這個hack是什么?上網仔細查了一下。簡單的說針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack,也叫寫CSS hack。
Css hack的原理:由于不同的瀏覽器對CSS的支持及解析結果不一樣,還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。 比如 IE6能識別下劃線"_"和星號" * ",IE7能識別星號" * ",但不能識別下劃線"_",而firefox兩個都不能認識。等等 書寫順序,一般是將識別能力強的瀏覽器的CSS寫在后面 瀏覽器優先級別:FF < IE7 < IE6 , CSS hack書寫順序一般為FF IE7 IE6 來看下面div+css瀏覽器兼容的例子: #demo {width:100px;} ????/*被FIREFOX,IE6,IE7執行.*/ * html #demo {width:120px;} /*會被IE6執行,之前的定義會被后來的覆蓋,所以#demo的寬度在IE6就為120px; */ *+html #demo {width:130px;} /*會被IE7執行*/ 所以最后,#demo的寬度在三個瀏覽器的解釋為: firefox:100px; ie6:120px; ie7:130px; 以上例子也可以用我的上一篇文章“div+css瀏覽器兼容實例一中的方法來解決!在這里就不再舉例了。” Div+css瀏覽器的兼容技巧: ① 垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.) ② 水平居中. margin: 0 auto;(當然不是萬能)③ 若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
④ FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
⑤ ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表) ⑥ 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應. ⑦ 關于手形光標. cursor: pointer. 而hand 只適用于 IE. ⑧ FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
?注:針對firefox ?IE6 ?IE7的css樣式
現在大部分都是用!important來hack,對于IE6和firefox測試可以正常顯示,
但是IE7 !important可以正確解釋,會導致頁面沒按要求顯示!找到一個針
對IE7不錯的hack方式就是使用“*+html”,現在用IE7瀏覽一下,應該沒有問題了。
現在寫一個瀏覽器兼容的CSS樣式:
#cshk{ height:20px; } /* Moz */
* html #cshk {height:50px; } /* IE6 */
*+html #cshk {height:80px; } /* IE7 */
那么在firefox下高度為20,IE6下的高度為50,IE7下的高度為80。 給大家一點意見:能不用CSS Hack還是不用的好。其實在設計網站的時候,如果能考慮到一些可能出現CSS bug的地方,是最好的,我設計網站的時候都盡量避免CSS bug.一般高手都不用hack. 如果您還有什么不理解或不滿意答案的話請留言.
總結
以上是生活随笔為你收集整理的CSS hack浏览器兼容一览表的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 网页禁止右键代码各类代码大全
- 下一篇: 兼容IE各版本的纯CSS二级下拉菜单