關(guān)于IE、火狐等瀏覽器兼容問題的總結(jié)
今天整理系統(tǒng)，發(fā)現(xiàn)系統(tǒng)很多頁面，只有在IE6下顯示正常，其它的都不正常，很是奇怪。所以上網(wǎng)找了一些關(guān)于瀏覽器兼容的問題和解決辦法，在此我覺得大牛們總結(jié)的比較精彩，分享給網(wǎng)友們！
一、CSS兼容
以下兩種方法幾乎能解決現(xiàn)今所有兼容.
1, !important (不是很推薦，用下面的一種感覺最安全)
隨著IE7對!important的支持, !important 方法現(xiàn)在只針對IE6的兼容.(注意寫法.記得該聲明位置需要提前.)
代碼:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77對FireFox <from 針對firefox ie6 ie7的css樣式>
*+html 與 *html 是IE特有的標(biāo)簽, firefox 暫不支持.而*+html 又為 IE7特有標(biāo)簽.
代碼：
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
</style>
注意:
*+html 對IE7的兼容 必須保證HTML頂部有如下聲明：
代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w3.org/TR/html4/loose.dtd">
二、解決p錯亂（非常重要）
可以用這個解決多個p對齊時的間距不對，
關(guān)于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的p加上 class=”clearfix” 即可,屢試不爽.
代碼：
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
三、其它零碎（不容忽視，細節(jié)決定成?。?/strong>
1. 文字本身的大小不兼容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff 下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-height 。確保所有文字都有默認的 line-height 值。這點很重要，在高度上我們不能容忍1px 的差異。
2.ff下容器高度限定，即容器定義了height之后，容器邊框的外形就確定了，不會被內(nèi)容撐大，而ie下是會被內(nèi)容撐大，高度限定失效。所以不要輕易給容器定義height。
3.橫向上的撐破容器問題，。如果float 容器未定義寬度，ff下內(nèi)容會盡可能撐開容器寬度，ie下則會優(yōu)先考慮內(nèi)容折行。故，內(nèi)容可能撐破的浮動容器需要定義width。
小實驗：有興趣大家可以看看這段實驗。在不同瀏覽器下分別測試以下各項代碼。
a.<p style=”border:1px solid red;height:10px”></p> b. <p style=”border:1px solid red;width:10px”></p>
c. <p style=”border:1px solid red;float:left”></p> d. <p style=”border:1px solid red;overflow:hidden”></p>
上面的代碼在不同瀏覽器中是不一樣的，實驗起源于對小height 值p 的運用，<p style=”height:10px;overflow:hidden”></p>，小height 值要配合overflow:hidden一起使用。實驗好玩而已，想說明的是，瀏覽器對容器的邊界解釋是大不相同的，容器內(nèi)容的影響結(jié)果各不相同。
4.最被痛恨的，double-margin bug。ie6下給浮動容器定義margin-left 或者margin-right 實際效果是數(shù)值的2倍。解決方案，給浮動容器定義display:inline。
5.mirror margin bug，當(dāng)外層元素內(nèi)有float元素時，外層元素如定義margin-top:14px，將自動生成margin-bottom:14px。 padding也會出現(xiàn)類似問題，都是ie6下的特產(chǎn)，該類bug 出現(xiàn)的情況較為復(fù)雜，遠不只這一種出現(xiàn)條件，還沒系統(tǒng)整理。解決方案：外層元素設(shè)定border 或 設(shè)定float。
引申：ff 和ie 下對容器的margin-bottom，padding-bottom的解釋有時不一致，似乎與之相關(guān)。
6. 吞吃現(xiàn)象。還是ie6，上下兩個p，上面的p設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的p 也有了背景，這就是吞吃現(xiàn)象。對應(yīng)上面的背景吞吃現(xiàn)象，還有滾動下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個zoom好象是專門為解決ie6 bug而生的。
7.注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結(jié)這個bug使用的文案，ie6的這個bug 下，大家會在頁面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。
8.img 下的留白，大家看這段代碼有啥問題：
<p>
< img src=”" mce_src=”" />
< /p>
把p的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫
<p>
<img src=”" mce_src=”" /></p>
后面兩個標(biāo)簽要緊挨著。ie7下這個bug 依然存在。解決方案：給img設(shè)定 display:block。
9. 失去line-height。<p style=”line-height:20px”><img />文字</p>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。
引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們在ie和ff下能一致，你會發(fā)現(xiàn)怎么調(diào)都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調(diào)整。
10.clear層應(yīng)該單獨使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個內(nèi)容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效
<p style=”background:red;float:left;”>dd</p>
< p style=”clear:both;margin-top:18px;background:green”>ff</p>
11.ie 下overflow:hidden對其下的絕對層position:absolute或者相對層 position:relative無效。解決方案：給overflow:hidden加position:relative或者position: absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
12.ie6下嚴重的bug，float元素如沒定義寬度，內(nèi)部如有p定義了height或zoom:1，這個p就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復(fù)雜的容器，都要給個寬度的。
13.ie6下的bug，絕對定位的p下包含相對定位的p，如果給內(nèi)層相對定位的p高度height具體值，內(nèi)層相對層將具有100%的width值，外層絕對層將被撐大。解決方案給內(nèi)層相對層float屬性。
14.width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學(xué)乖了跟了ie。
四、一句話解決所有兼容性問題（懶人有懶人的辦法奧?。?/p>
在網(wǎng)站頭部加上一句：
1. Google Chrome Frame也可以讓IE用上Chrome的引擎:
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″/>
2.強制IE8使用IE7模式來解析
<meta http-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>
//或者
<metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>
3.強制IE8使用IE6或IE5模式來解析
<metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>
<metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>
4.如果一個特定版本的IE支持所要求的兼容性模式多于一種，如：
<metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>
我用的是***一種，不過還是沒有徹底解決問題，我也在尋求方法，懇求大牛們幫忙解決！
