溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何快速解決瀏覽器的兼容性的問題，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
由于各瀏覽器對頁面的解析不同，會導致頁面在不同瀏覽器中顯示的樣式不一致，為了保持頁面的統(tǒng)一，經常需要對瀏覽器進行兼容性問題的調試。
CSS Hack
面對瀏覽器諸多的兼容性問題，經常需要通過CSS樣式來調試，其中用的最多的就是CSS Hack。所謂CSS Hack就是針對不同的瀏覽器書寫不同的CSS樣式，通過使用某個瀏覽器單獨識別的樣式代碼，控制該瀏覽器的顯示效果。CSS Hack主要分為兩類
CSS 選擇器Hack
CSS選擇器Hack是指通過在CSS選擇器的前面，加上一些只有特定瀏覽器才能識別的Hack前綴，來控制不同的CSS樣式。針對不同版本的瀏覽器，選擇器Hack分為以下幾類：
（1）IE6及IE6以下版本識別的選擇器Hack
書寫CSS樣式時，如果希望此樣式只對IE6及IE6以下版本的瀏覽器生效，可以使用IE6及以下版本的選擇器Hack，其基本語法如下：
* html 選擇器{樣式代碼}
（2）IE7識別的選擇器Hack
書寫CSS樣式時，如果希望此樣式只對IE7瀏覽器生效，可以使用IE7識別的選擇器Hack，其基本語法如下：
*+html 選擇器{樣式代碼}
CSS屬性Hack
這里小強老師，把屬性hack分為 前綴屬性hack和 后綴屬性hack
| CSS屬性Hack（前綴） | 針對的瀏覽器 |
| _color:red; | IE6及其以下的版本 |
| *color:red ;或者 +color:red; | IE7及其以下的版本 |
| CSS屬性Hack（后綴） | 針對的瀏覽器 |
| 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瀏覽器 |
其實，現(xiàn)在越來越的公司，不太讓兼容ie6了，現(xiàn)在比較關心的是ie8.910等高版本的瀏覽器，因此這里小強老師也總結了ie專屬hack ，比如ie8等。
| 選擇器Hack寫法 | 針對于的瀏覽器 |
| @media screen\9{body { background: red; }} | 只對IE6/7生效 |
| @media \0screen {body { background: red; }} | 只對IE8生效 |
| @media \0screen\,screen\9{body { background: blue; }} | 只對IE6/7/8有效 |
| @media screen\0 {body { background: green; }} | 只對IE8/9/10有效 |
| @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} | 只對IE10有效 |
如果樣式比較多，條件注釋，是不錯的選擇：
IE條件注釋語句
| IE條件注釋語句 | 針對的瀏覽器版本 |
| <!--[if lt IE 7]>內容<![endif]--> | IE7 以下版本 |
| <!--[if lte IE 7]>內容<![endif]--> | IE7及以下版本（包含IE7） |
| <!--[if gt IE 7]>內容<![endif]--> | IE7 以上版本 |
| <!--[if gte IE 7]>內容<![endif]--> | IE7及以上版本（包含IE7） |
| <!--[if !IE 7]>內容<![endif]--> | 非IE7版本 |
| <!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]--> | 非IE瀏覽器 |
上述內容就是如何快速解決瀏覽器的兼容性的問題，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
