一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10
在網(wǎng)站開發(fā)中不免因?yàn)楦鞣N兼容問題苦惱，針對兼容問題，其實(shí)IE給出了解決方案Google也給出了解決方案
百度也應(yīng)用了這種方案去解決IE的兼容問題
百度源代碼如下
百度一下，你就知道
var wpo={start:new Date*1,pid:109,page:‘superpage’}
可以打開百度，右鍵查看源碼看下！我們可以看下文件頭是否存在這樣一行代碼！
這句話的意思是強(qiáng)制使用IE7模式來解析網(wǎng)頁代碼！
在這里送上幾種IE使用模式！
2. Google Chrome Frame也可以讓IE用上Chrome的引擎:
3.強(qiáng)制IE8使用IE7模式來解析
//或者
4.強(qiáng)制IE8使用IE6或IE5模式來解析
?
?
5.如果一個(gè)特定版本的IE支持所要求的兼容性模式多于一種，如：
二.設(shè)定網(wǎng)站服務(wù)器以指定預(yù)設(shè)兼容性模式
如果服務(wù)器是自己的話，可以在服務(wù)器上定義一個(gè)自訂標(biāo)頭來為它們的網(wǎng)站預(yù)設(shè)一個(gè)特定的文件兼容性模式。這個(gè)特定的方法取決于你的網(wǎng)站服務(wù)器。
錄入，下列的 web.config文件使Microsoft Internet Information Services (IIS)能定義一個(gè)自訂標(biāo)頭以自動(dòng)使用IE7 mode來編譯所有網(wǎng)頁。
另外還有一起其他的解決方案，例如google的
ie7 – js中是一個(gè)JavaScript庫（解決IE與W3C標(biāo)準(zhǔn)的沖突的JS庫），使微軟的Internet Explorer的行為像一個(gè)Web標(biāo)準(zhǔn)兼容的瀏覽器，支持更多的W3C標(biāo)準(zhǔn)，支持CSS2、CSS3選擇器。它修復(fù)了許多的HTML和CSS問題，并使 得透明PNG在IE5、IE6下正確顯示。
使IE5,IE6兼容到IE7模式（推薦）
使IE5,IE6,IE7兼容到IE8模式
使IE5,IE6,IE7,IE8兼容到IE9模式
解決PNG顯示問題
只需將透明png圖片命名為*-trans.png
需要注意的是：此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,默認(rèn)會(huì)占滿整個(gè)容器。
轉(zhuǎn)載：http://hi.baidu.com/myplan/blog/item/cdb09dfa1fa748a99f514626.html
三、
創(chuàng)建html5時(shí)發(fā)現(xiàn)這么一句話，不知其什么意思，百度如下：
這樣寫可以達(dá)到的效果是如果安裝了GCF，則使用GCF來渲染頁面，如果沒安裝GCF，則使用最高版本的IE內(nèi)核進(jìn)行渲染。Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF）。這個(gè)插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁時(shí)，實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核，而且支持IE6、7、8等多個(gè)版本的IE瀏覽器。
http://blog.csdn.net/abxn2002/article/details/7312459
初學(xué)html和css時(shí)，每天切圖，總會(huì)遇到很多瀏覽器兼容性問題。最近一直關(guān)注移動(dòng)平臺(tái)開發(fā)，就html和css來說，不用考慮那么多瀏覽器兼容性問題。到現(xiàn)在，以至于很多瀏覽器兼容性幾乎忘光了。今天把以前總結(jié)的知識(shí)拿來分享一下，順便自己也復(fù)習(xí)一下。當(dāng)然，其中肯定有很多不足，望指正啊。
1 ie6.0橫向margin加倍
產(chǎn)生因素：塊屬性、float、有橫向margin。
解決方法：display：inline；
2 ie6.0下默認(rèn)有行高
解決方法：overflow:hidden;或font-size:0;或line-height：xx px；
3 在各個(gè)瀏覽器下img有空隙(原因是：回車。)
解決方法:讓圖片浮動(dòng)。
4 一個(gè)父標(biāo)簽與幾個(gè)子標(biāo)簽嵌套，父標(biāo)簽不浮動(dòng)，子標(biāo)簽float，子標(biāo)簽不撐開父的高度。
解決方法：a 在子標(biāo)簽最后清浮動(dòng){
? ? ? ? ? ? ? ? ? b 父標(biāo)簽添加{overflow：hidden；}
? ? ? ? ? ? ? ? ? c 給父標(biāo)簽設(shè)置高度
5 Ie6下，不識(shí)別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，
解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
? ? ? ? ? ? ? ? ? ? ? ? ? html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
? ? ? ??(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（因?yàn)閕e6有一個(gè)特征，當(dāng)定義一個(gè)高度時(shí)，如果內(nèi)容超過高度，元素會(huì)自動(dòng)調(diào)整高度。）
6 Ie6里面：如li設(shè)寬、高，并且li里面的標(biāo)簽浮動(dòng)，那么li之間會(huì)有間距
解決方法：li不設(shè)寬、高或者li內(nèi)的標(biāo)簽不浮動(dòng)
7 ?li之間有間距
解決方法：li 設(shè)置vertical-align:middle;
8 3像素問題：ie6下，當(dāng)浮動(dòng)元素與流動(dòng)元素并列顯示時(shí)，他們之間會(huì)存在三像素問題。
? ?解決方法：用hack技術(shù)， 例如：所有瀏覽器通用 height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;
9 當(dāng)定義行內(nèi)元素為包含框時(shí)，且包含框包含的絕對定位元素以百分比為單位進(jìn)行定位時(shí)，會(huì)出現(xiàn)混亂。
? ? 解決方法：在行內(nèi)元素里加入{zoom：1；}
10 當(dāng)多個(gè)浮動(dòng)元素中間夾雜著HTML注釋語句時(shí)，如果浮動(dòng)元素寬度為100%，則在下一行多顯示一個(gè)上一行最后一個(gè)字符。
? ? ? ? 解決辦法：給浮動(dòng)元素添加display:inline;。
11 opacity 定義元素的不透明度
? filter：alpha（opacity=80）；/*ie支持該屬性*/
? opacity：0.8；/*支持css3的瀏覽器*/
12 兩個(gè)塊元素，豎向的margin值不增加，會(huì)重疊，其間距為最大margin值。
13 優(yōu)先級：被!important 注明的css屬性具有最高優(yōu)先級(.abc{color:red !important;})。但在ie6中!important具有一個(gè)bug:在同一組css屬性中，!important不起作用。
14?火狐不識(shí)別background-position-y 或background-position-x;
---------------------------2014.01.10補(bǔ)充-------------------------------
15 ie6 不支持 fixed?
/*對于非IE6可以這樣寫*/#top{?
? ? position:fixed;?
? ? bottom:0;?
? ? right:20px;?
}? /*但是IE6是不支持fixed定位的，需要另外重寫*/#top{?
? ? position:fixed;?
? ? _position:absolute;?
? ? top:0;?
? ? right:20px;?
? ? _bottom:auto;?
? ? _top:expression(eval(document.documentElement.scrollTop));
}? /*使用hack使IE6實(shí)現(xiàn)該效果，但這個(gè)東東會(huì)閃爍，需要以下代碼*/*html{?
? ? background-image:url(about:blank);?
? ? background-attachment:fixed;?
}? /*使固定在頂部*/#top{?
? ? _position:absolute;?
? ? _bottom:auto;?
? ? _top:expression(eval(document.documentElement.scrollTop));?
}? /*固定在底部*/#top{?
? ? _position:absolute;?
? ? _bottom:auto;?
? ? _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));?
}? /*垂直居中*/#top{? ? position:fixed;? ? top:50%;? ? margin-top:-50px;? ? _position:absolute;? ? _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}
16 ?解決 ie6 最大、最小寬高 hack方法
/* 最小寬度 */.min_width{? ? min-width:300px;? ? _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}/* 最大寬度 */.max_width{? max-width:600px;? _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}/* 最小高度 */.min_height{? min-height:200px;? _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}/* 最大高度 */.max_height{? max-height:400px;? _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
17 ?z-index不起作用的 bug
1）ie6下 首先講講第一種z-index無論設(shè)置多高都不起作用情況。這種情況發(fā)生的條件有三個(gè)：1、父標(biāo)簽position屬性為relative；2、問題標(biāo)簽含有浮動(dòng)(float)屬性。
2）所有瀏覽器：它只認(rèn)第一個(gè)爸爸
層級的高低不僅要看自己，還要看自己的老爸這個(gè)后臺(tái)是否夠硬。用術(shù)語具體描述為：
父標(biāo)簽position屬性為relative或absolute時(shí)，子標(biāo)簽的absolute屬性是相對于父標(biāo)簽而言的。而在IE6下，層級的表現(xiàn)有時(shí)候不是看子標(biāo)簽的z-index多高，而要看它們的父標(biāo)簽的z-index誰高誰低。
18 ?ie各個(gè)版本hack
/*類內(nèi)部hack：*/? ? .header {_width:100px;}? ? ? ? ? ? /* IE6專用*/? ? .header {*+width:100px;}? ? ? ? /* IE7專用*/? ? .header {*width:100px;}? ? ? ? ? ? /* IE6、IE7共用*/? ? .header {width:100px\0;}? ? ? ? /* IE8、IE9共用*/? ? .header {width:100px\9;}? ? ? ? /* IE6、IE7、IE8、IE9共用*/? ? .header {width:330px\9\0;}? ? /* IE9專用*//*選擇器Hack：*/? ? *html .header{}? ? ? ? /*IE6*/
? ? *+html .header{}? ? /*IE7*/
