瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法
我要評(píng)論由于各瀏覽器對(duì)頁(yè)面的解析不同，會(huì)導(dǎo)致頁(yè)面在不同瀏覽器中顯示的樣式不一致，為了保持頁(yè)面的統(tǒng)一，經(jīng)常需要對(duì)瀏覽器進(jìn)行兼容性問(wèn)題的調(diào)試。
CSS Hack
面對(duì)瀏覽器諸多的兼容性問(wèn)題，經(jīng)常需要通過(guò)CSS樣式來(lái)調(diào)試，其中用的最多的就是CSS Hack。所謂CSS Hack就是針對(duì)不同的瀏覽器書(shū)寫(xiě)不同的CSS樣式，通過(guò)使用某個(gè)瀏覽器單獨(dú)識(shí)別的樣式代碼，控制該瀏覽器的顯示效果。CSS Hack主要分為兩類(lèi)
CSS 選擇器Hack
CSS選擇器Hack是指通過(guò)在CSS選擇器的前面，加上一些只有特定瀏覽器才能識(shí)別的Hack前綴，來(lái)控制不同的CSS樣式。針對(duì)不同版本的瀏覽器，選擇器Hack分為以下幾類(lèi)：
（1）IE6及IE6以下版本識(shí)別的選擇器Hack
書(shū)寫(xiě)CSS樣式時(shí)，如果希望此樣式只對(duì)IE6及IE6以下版本的瀏覽器生效，可以使用IE6及以下版本的選擇器Hack，其基本語(yǔ)法如下：
* html 選擇器{樣式代碼}
（2）IE7識(shí)別的選擇器Hack
書(shū)寫(xiě)CSS樣式時(shí)，如果希望此樣式只對(duì)IE7瀏覽器生效，可以使用IE7識(shí)別的選擇器Hack，其基本語(yǔ)法如下：
*+html 選擇器{樣式代碼}
CSS屬性Hack
這里小強(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專(zhuān)屬hack ，比如ie8等。
| 選擇器Hack寫(xiě)法 | 針對(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有效 |
如果樣式比較多，條件注釋?zhuān)遣诲e(cuò)的選擇：
IE條件注釋語(yǔ)句
| IE條件注釋語(yǔ)句 | 針對(duì)的瀏覽器版本 |
| <!--[if lt IE 7]>內(nèi)容<![endif]--> | IE7 以下版本 |
| <!--[if lte IE 7]>內(nèi)容<![endif]--> | IE7及以下版本（包含IE7） |
| <!--[if gt IE 7]>內(nèi)容<![endif]--> | IE7 以上版本 |
| <!--[if gte IE 7]>內(nèi)容<![endif]--> | IE7及以上版本（包含IE7） |
| <!--[if !IE 7]>內(nèi)容<![endif]--> | 非IE7版本 |
| <!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]--> | 非IE瀏覽器 |
以上就是小編為大家?guī)?lái)的瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法的全部?jī)?nèi)容了，希望大家多多支持腳步之家。
原文地址：http://www.cnblogs.com/androidshouce/archive/2016/06/16/5589770.html
相關(guān)文章
詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問(wèn)題解決
haslayout是IE瀏覽器專(zhuān)有的屬性,然而這個(gè)屬性卻同樣會(huì)給不同版本的IE帶來(lái)浮動(dòng)問(wèn)題等一些列兼容性上面的麻煩...這里我們就來(lái)詳解IE瀏覽器的haslayout屬性及相關(guān)兼容性問(wèn)題解2016-07-08HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享
使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問(wèn)題,特別是視頻方面瀏覽器對(duì)解碼的支持會(huì)有所不同,所以下面就來(lái)分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分2016-05-19- 這篇文章主要介紹了各種瀏覽器下的CSS Hack兼容性寫(xiě)法,CSS Hack大致可以分為內(nèi)部Hack和選擇器Hack以及HTML頭部引用Hack,需要的朋友可以參考下2016-03-14
CSS3中的Opacity多瀏覽器透明度兼容性問(wèn)題
用來(lái)設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持，不過(guò)各個(gè)瀏覽器都有自己的私有屬性來(lái)支持,其中包括老版本的Mozilla和Safari2015-11-09- 火狐瀏覽器怎么切換到IE兼容模式？有很多網(wǎng)頁(yè)其他瀏覽器打不開(kāi)，但是用ie瀏覽器就可以打開(kāi)，怎么設(shè)置成ie兼容模式呢？下面我們來(lái)看看火狐瀏覽器切換到IE兼容模式的詳細(xì)圖文2015-10-27
- 下面小編就為大家?guī)?lái)一篇淺談瀏覽器的兼容性(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-25