一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10
在網(wǎng)站開發(fā)中不免因為各種兼容問題苦惱驻粟，針對兼容問題善延，其實IE給出了解決方案Google也給出了解決方案
百度也應(yīng)用了這種方案去解決IE的兼容問題
百度源代碼如下
百度一下，你就知道
var wpo={start:new Date*1,pid:109,page:‘superpage’}
可以打開百度，右鍵查看源碼看下！我們可以看下文件頭是否存在這樣一行代碼！
這句話的意思是強制使用IE7模式來解析網(wǎng)頁代碼恶复！
在這里送上幾種IE使用模式娇唯！
2. Google Chrome Frame也可以讓IE用上Chrome的引擎:
3.強制IE8使用IE7模式來解析
//或者
4.強制IE8使用IE6或IE5模式來解析
?
?
5.如果一個特定版本的IE支持所要求的兼容性模式多于一種，如：
二.設(shè)定網(wǎng)站服務(wù)器以指定預(yù)設(shè)兼容性模式
如果服務(wù)器是自己的話寂玲，可以在服務(wù)器上定義一個自訂標(biāo)頭來為它們的網(wǎng)站預(yù)設(shè)一個特定的文件兼容性模式塔插。這個特定的方法取決于你的網(wǎng)站服務(wù)器。
錄入拓哟，下列的 web.config文件使Microsoft Internet Information Services (IIS)能定義一個自訂標(biāo)頭以自動使用IE7 mode來編譯所有網(wǎng)頁想许。
另外還有一起其他的解決方案，例如google的
ie7 – js中是一個JavaScript庫（解決IE與W3C標(biāo)準(zhǔn)的沖突的JS庫）断序，使微軟的Internet Explorer的行為像一個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)無法起到任何作用,默認會占滿整個容器。
轉(zhuǎn)載：http://hi.baidu.com/myplan/blog/item/cdb09dfa1fa748a99f514626.html
三阵苇、
創(chuàng)建html5時發(fā)現(xiàn)這么一句話壁公，不知其什么意思，百度如下：
這樣寫可以達到的效果是如果安裝了GCF绅项，則使用GCF來渲染頁面紊册，如果沒安裝GCF，則使用最高版本的IE內(nèi)核進行渲染快耿。Google Chrome Frame（谷歌內(nèi)嵌瀏覽器框架GCF）囊陡。這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網(wǎng)頁時掀亥，實際上使用的是Google Chrome瀏覽器內(nèi)核撞反，而且支持IE6、7铺浇、8等多個版本的IE瀏覽器痢畜。
http://blog.csdn.net/abxn2002/article/details/7312459
初學(xué)html和css時垛膝，每天切圖鳍侣，總會遇到很多瀏覽器兼容性問題。最近一直關(guān)注移動平臺開發(fā)吼拥，就html和css來說倚聚，不用考慮那么多瀏覽器兼容性問題。到現(xiàn)在凿可，以至于很多瀏覽器兼容性幾乎忘光了惑折。今天把以前總結(jié)的知識拿來分享一下授账，順便自己也復(fù)習(xí)一下。當(dāng)然惨驶，其中肯定有很多不足白热，望指正啊。
1 ie6.0橫向margin加倍
產(chǎn)生因素：塊屬性粗卜、float屋确、有橫向margin。
解決方法：display：inline续扔；
2 ie6.0下默認有行高
解決方法：overflow:hidden;或font-size:0;或line-height：xx px攻臀；
3 在各個瀏覽器下img有空隙(原因是：回車。)
解決方法:讓圖片浮動纱昧。
4 一個父標(biāo)簽與幾個子標(biāo)簽嵌套刨啸，父標(biāo)簽不浮動，子標(biāo)簽float识脆，子標(biāo)簽不撐開父的高度设联。
解決方法：a 在子標(biāo)簽最后清浮動{
? ? ? ? ? ? ? ? ? b 父標(biāo)簽添加{overflow：hidden；}
? ? ? ? ? ? ? ? ? c 給父標(biāo)簽設(shè)置高度
5 Ie6下灼捂，不識別最大寬仑荐、高度和最小寬高度，意即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;}（因為ie6有一個特征粘招，當(dāng)定義一個高度時，如果內(nèi)容超過高度偎球，元素會自動調(diào)整高度洒扎。）
6 Ie6里面：如li設(shè)寬、高衰絮，并且li里面的標(biāo)簽浮動袍冷，那么li之間會有間距
解決方法：li不設(shè)寬、高或者li內(nèi)的標(biāo)簽不浮動
7 ?li之間有間距
解決方法：li 設(shè)置vertical-align:middle;
8 3像素問題：ie6下猫牡，當(dāng)浮動元素與流動元素并列顯示時胡诗，他們之間會存在三像素問題。
? ?解決方法：用hack技術(shù)淌友， 例如：所有瀏覽器通用 height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6專用_height:100px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie7專用*+height:100px;?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ie6/ie7共用*height:100px;
9 當(dāng)定義行內(nèi)元素為包含框時煌恢，且包含框包含的絕對定位元素以百分比為單位進行定位時，會出現(xiàn)混亂震庭。
? ? 解決方法：在行內(nèi)元素里加入{zoom：1瑰抵；}
10 當(dāng)多個浮動元素中間夾雜著HTML注釋語句時，如果浮動元素寬度為100%器联，則在下一行多顯示一個上一行最后一個字符二汛。
? ? ? ? 解決辦法：給浮動元素添加display:inline;婿崭。
11 opacity 定義元素的不透明度
? filter：alpha（opacity=80）；/*ie支持該屬性*/
? opacity：0.8肴颊；/*支持css3的瀏覽器*/
12 兩個塊元素氓栈，豎向的margin值不增加，會重疊婿着，其間距為最大margin值颤绕。
13 優(yōu)先級：被!important 注明的css屬性具有最高優(yōu)先級(.abc{color:red !important;})。但在ie6中!important具有一個bug:在同一組css屬性中祟身，!important不起作用奥务。
14?火狐不識別background-position-y 或background-position-x;
---------------------------2014.01.10補充-------------------------------
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實現(xiàn)該效果袜硫，但這個東東會閃爍氯葬，需要以下代碼*/*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ā)生的條件有三個：1帚称、父標(biāo)簽position屬性為relative；2秽澳、問題標(biāo)簽含有浮動(float)屬性闯睹。
2）所有瀏覽器：它只認第一個爸爸
層級的高低不僅要看自己，還要看自己的老爸這個后臺是否夠硬担神。用術(shù)語具體描述為：
父標(biāo)簽position屬性為relative或absolute時楼吃，子標(biāo)簽的absolute屬性是相對于父標(biāo)簽而言的。而在IE6下妄讯，層級的表現(xiàn)有時候不是看子標(biāo)簽的z-index多高孩锡，而要看它們的父標(biāo)簽的z-index誰高誰低。
18 ?ie各個版本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*/
