CSS hack之特殊符號的應(yīng)用_瀏覽器兼容教程
由于各大瀏覽器尤其IE瀏覽器對web標(biāo)準(zhǔn)支持情況不一,導(dǎo)致標(biāo)準(zhǔn)的網(wǎng)頁在各個瀏覽器中的表現(xiàn)不一,因此,解決各瀏覽器兼容性問題成為了前端工程師最重要的工作之一,而所謂的hack技術(shù)則是前端開發(fā)中必用的。
CSS hack的寫法有很多種,其中,特殊符號的應(yīng)用最為普遍,也最為簡潔,下面一一介紹了特殊符號類型的CSS hack技術(shù):
1、反斜線(\)
適用瀏覽器:IE/Mac
反斜線(\)hack利用了IE/Mac的一個bug。以\*/結(jié)束的注釋在IE/Mac上是不正確關(guān)閉的,所以那些需要在IE/Mac上被忽略的語句可以放在這種注釋后面。
- /* 在IE Mac上忽略下面的語句 \*/
- selector { ...styles... }
- /* 忽略結(jié)束 */
2、下劃線(_)
適用瀏覽器:IE6及其以下版本
IE 6 及以下的版本可以識別帶有下劃線前綴的屬性,而其它瀏覽器會忽略它。因此,一個屬性前面加上下劃線或者連字符,就成為了IE6及以下版本瀏覽器的專有屬性。
- #elem {
- width: [W3C Model Width];
- _width: [BorderBox Model];
- }
PS:這個hack利用瀏覽器的bug使用了無效的CSS,因而不推薦使用。
3、星號(*)
適用瀏覽器:IE7以下版本
除了下劃線和連字符,版本7及以下的IE可以識別以非字母字符為前綴的屬性,而其它瀏覽器會忽略。
- #elem {
- width: [W3C Model Width];
- *width: [BorderBox Model];
- }
PS:這個hack利用瀏覽器的bug使用了無效的CSS,因而不推薦使用。
4、星號 HTML(* html)
適用瀏覽器:IE4-6
HTML元素是W3C標(biāo)準(zhǔn)DOM的根元素,但是IE 4至6的版本中還有一個神秘的父元素。完全兼容的瀏覽器會忽略這個* html選擇器,但I(xiàn)E4-6卻會對它正常處理。
- * html p {font-size: 5em; }
PS:這個HACK使用了完全有效的CSS。
5、星號加號(*+)
適用瀏覽器:IE7
- *:first-child+html p { font-size: 5em; }
- 或者:
- *+html p { font-size: 5em; }
PS:只在IE7標(biāo)準(zhǔn)模型里工作正常,在怪異模式下不能用。同時,也被IE8的兼容模式(相當(dāng)于IE7的標(biāo)準(zhǔn)模式)所支持。它也使用了有效的CSS。
6、子選擇器(>)
適用瀏覽器: IE6以上版本及非IE瀏覽器
IE6和早期的版本不支持“子選擇器”(>),我們可以利用這個為其它瀏覽器指定特別的規(guī)則。
- html > body p { color: blue; }
7、子選擇器加注釋(>/**/)
適用瀏覽器: IE7以上版本及非IE瀏覽器
雖然IE7支持對子選擇器,但通過以下hack方法也可以把IE7也排除。當(dāng)一個空的注釋緊跟在子選擇器的后面重復(fù)的時候,IE7會不識別后面的規(guī)則,就和較早版本的瀏覽器一樣。
- html >/**/ body p { color: blue; }
來源:五月蘭博客,http://www.wuyuelan.com
瀏覽器兼容教程Rss訂閱Div+Css教程搜索
瀏覽器兼容教程推薦
猜你也喜歡看這些
- 如何用CSS層疊樣式表控制鼠標(biāo)顯示的樣式
- WEB標(biāo)準(zhǔn)使我們的思維模式進(jìn)行轉(zhuǎn)變!
- DIV CSS:如何編寫代碼才能更有效率
- 標(biāo)準(zhǔn)的DIV CSS布局對SEO的影響
- 學(xué)習(xí)Div CSS從何入手技術(shù)
- 在IE中為abbr標(biāo)簽加樣式
- 根據(jù)時段自動切換你的站點CSS風(fēng)格
- 從GMail來看W3C網(wǎng)頁標(biāo)準(zhǔn)和Ajax
- WEB標(biāo)準(zhǔn)教程第4天:調(diào)用樣式表
- 符合WEB標(biāo)準(zhǔn)的下拉導(dǎo)航菜單例子
- 相關(guān)鏈接:
- 教程說明:
瀏覽器兼容教程-CSS hack之特殊符號的應(yīng)用。