面對(duì)瀏覽器諸多的兼容性問(wèn)題，經(jīng)常需要通過(guò)CSS樣式來(lái)調(diào)試，其中用的最多的就是CSS Hack。所謂CSS Hack就是針對(duì)不同的瀏覽器書(shū)寫不同的CSS樣式，通過(guò)使用某個(gè)瀏覽器單獨(dú)識(shí)別的樣式代碼，控制該瀏覽器的顯示效果。CSS Hack主要分為兩類
CSS選擇器Hack是指通過(guò)在CSS選擇器的前面，加上一些只有特定瀏覽器才能識(shí)別的Hack前綴，來(lái)控制不同的CSS樣式。針對(duì)不同版本的瀏覽器，選擇器Hack分為以下幾類：
（1）IE6及IE6以下版本識(shí)別的選擇器Hack
書(shū)寫CSS樣式時(shí)，如果希望此樣式只對(duì)IE6及IE6以下版本的瀏覽器生效，可以使用IE6及以下版本的選擇器Hack，其基本語(yǔ)法如下：
* html 選擇器{樣式代碼}
（2）IE7識(shí)別的選擇器Hack
書(shū)寫CSS樣式時(shí)，如果希望此樣式只對(duì)IE7瀏覽器生效，可以使用IE7識(shí)別的選擇器Hack，其基本語(yǔ)法如下：
*+html 選擇器{樣式代碼}
這里小強(qiáng)老師，把屬性hack分為 前綴屬性hack和 后綴屬性hack
| CSS屬性Hack（前綴） | 針對(duì)的瀏覽器 |
| _color:red; | IE6及其以下的版本 |
| *color:red ;或者 +color:red; | IE7及其以下的版本 |
| CSS屬性Hack（后綴） | 針對(duì)的瀏覽器 |
| color:red\9; | IE6/IE7/IE8/IE9/IE10版本 |
| color:red\0; | IE8/IE9/IE10版本 |
| color:red\9\0; | IE9/IE10 |
| color:red!important | IE7/IE8/IE9/IE10及其他非IE瀏覽器 |
其實(shí)，現(xiàn)在越來(lái)越的公司，不太讓兼容ie6了，現(xiàn)在比較關(guān)心的是ie8.910等高版本的瀏覽器，因此這里小強(qiáng)老師也總結(jié)了ie專屬hack ，比如ie8等。
| 選擇器Hack寫法 | 針對(duì)于的瀏覽器 |
| @media screen\9{body { background: red; }} | 只對(duì)IE6/7生效 |
| @media \0screen {body { background: red; }} | 只對(duì)IE8生效 |
| @media \0screen\,screen\9{body { background: blue; }} | 只對(duì)IE6/7/8有效 |
| @media screen\0 {body { background: green; }} | 只對(duì)IE8/9/10有效 |
| @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} | 只對(duì)IE10有效 |
如果樣式比較多，條件注釋，是不錯(cuò)的選擇：
| IE條件注釋語(yǔ)句 | 針對(duì)的瀏覽器版本 |
| 內(nèi)容 | IE7 以下版本 |
| 內(nèi)容 | IE7及以下版本（包含IE7） |
| 內(nèi)容 | IE7 以上版本 |
| 內(nèi)容 | IE7及以上版本（包含IE7） |
| 內(nèi)容 | 非IE7版本 |
| 您使用不是 Internet Explorer | 非IE瀏覽器 |
小強(qiáng)零零壹和大家一起分享
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2024 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
