為什么會有兼容問題滓彰？
由于瀏覽器種類眾多识樱，不同的瀏覽器其內(nèi)核亦不盡相同赠法，故各個瀏覽器對網(wǎng)頁的解析有一定出入，這也是導(dǎo)致瀏覽器兼容問題出現(xiàn)的主要原因淑倾，我們的網(wǎng)頁需要在主流瀏覽器上正常運(yùn)行馏鹤，就需要做好瀏覽器兼容。
- 使用Trident內(nèi)核的瀏覽器：
IE娇哆、Maxthon湃累、TT； - 使用Gecko內(nèi)核的瀏覽器：
Netcape6及以上版本碍讨、FireFox治力； - 使用Presto內(nèi)核的瀏覽器：
Opera7及以上版本； - 使用Webkit內(nèi)核的瀏覽器：
Safari勃黍、Chrome宵统。
現(xiàn)在說的兼容性問題，主要是說
IE與幾個主流瀏覽器如firefox覆获，IE7又是個跨度弄息，因為之前的版本更新甚慢痊班，bug甚多。從IE8開始疑枯，IE瀏覽器漸漸遵循標(biāo)準(zhǔn)辩块，到IE9后由于大家都一致認(rèn)為標(biāo)準(zhǔn)很重要，可以說在兼容性上比較好，但在中國來說废亭，由于xp的占有率問題国章，使用IE7以下的用戶仍然很多，所以不得不考慮低版本瀏覽器的兼容豆村。
對瀏覽器兼容問題液兽，一般分，
HTML掌动，Javascript兼容四啰，CSS兼容。 其中html相關(guān)問題較容易處理粗恢，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素柑晒，致其不能解析，所以平時注意一點眷射。特別是HTML5增加了許多新標(biāo)簽匙赞，低版本瀏覽器有點影響時代進(jìn)步啊
問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
- 問題癥狀：隨便寫幾個標(biāo)簽，不加樣式控制的情況下妖碉，各自的
margin和padding差異較大涌庭。 - 碰到頻率: 100%
- 解決方案：
css里*{margin:0;padding:0;} - 備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的
css文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補(bǔ)丁是0欧宜。
問題二：塊屬性標(biāo)簽float后坐榆，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大
- 問題癥狀:常見癥狀是
ie6中后面的一塊被頂?shù)较乱恍?/li> - 碰到頻率：90%（稍微復(fù)雜點的頁面都會碰到冗茸，
float布局最常見的瀏覽器兼容問題） - 解決方案：在
float的標(biāo)簽樣式控制中加入display:inline;將其轉(zhuǎn)化為行內(nèi)屬性 - 備注：我們最常用的就是
div+css布局了席镀，而div就是個典型的塊屬性標(biāo)簽，橫向布局的時候我們通常都是用divfloat實現(xiàn)的夏漱，橫向的間距設(shè)置如果用margin實現(xiàn)愉昆，這是個必然會碰到的兼容性問題。
問題三：設(shè)置較小高度標(biāo)簽（一般小于10px）麻蹋，在ie6，ie7焊切，遨游中高度超出自己設(shè)置高度
- 問題癥狀：
ie6扮授、7和遨游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度 - 碰到頻率：60%
- 解決方案：給超出高度的標(biāo)簽設(shè)置
overflow:hidden;或者設(shè)置行高line-height小于你設(shè)置的高度专肪。 - 備注：這一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里刹勃。出現(xiàn)這個問題的原因是
ie8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的嚎尤，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高荔仁。
問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局，又有橫行的margin的情況乏梁，ie6間距bug（類似第二種）
- 問題癥狀：
ie6里的間距比超過設(shè)置的間距 - 碰到幾率：20%
- 解決方案：在
display:block;后面加入display:inline;display:table; - 備注：行內(nèi)屬性標(biāo)簽次洼，為設(shè)置寬高，我們需要設(shè)置
display:block;(除input標(biāo)簽比較特殊)遇骑。在用float布局并有橫向的margin后卖毁，在ie6下，他就具有了塊屬性float后的橫向margin的bug落萎。不過因它本身就是行內(nèi)屬性標(biāo)簽亥啦，所以我們再加上display:inline的話，它的高寬就不可設(shè)了练链。這時候我們還需要在display:inline后面加入display:talbe翔脱。
問題五：圖片默認(rèn)有間距
- 問題癥狀：幾個
img標(biāo)簽放在一起的時候，有些瀏覽器會有默認(rèn)的間距媒鼓，加上問題一中提到的通配符也不起作用届吁。 - 碰到幾率：20%
- 解決方案：使用
float屬性為img布局 - 備注：因
img標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度隶糕，img標(biāo)簽都會排在一行里瓷产，但是部分瀏覽器的img標(biāo)簽之間會有個間距。去掉這個間距使用float是王道
問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
- 問題癥狀：因為
min-height本身就是一個不兼容的css屬性枚驻，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容 - 碰到幾率：5%
- 解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度
200px濒旦，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;} - 備注：在
B/S系統(tǒng)前端開時，有很多情況下我們有這種需求再登。當(dāng)內(nèi)容小于一個值（如300px）時尔邓。容器高度為300px；當(dāng)內(nèi)容高度大于這個值時锉矢，容器高度被撐高梯嗽，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題沽损。
問題七：透明度的兼容css設(shè)置
- 方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容灯节，當(dāng)然熟練到一定的程度就沒這么麻煩了。建議經(jīng)常會碰到兼容性問題的新手使用绵估。很多兼容性問題都是因為瀏覽器對標(biāo)簽的默認(rèn)屬性解析不同造成的炎疆，只要我們稍加設(shè)置都能輕松地解決這些兼容問題。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話国裳，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題形入。
技巧一：css hack
使用hack 我可以把瀏覽器分為3類：ie6 ；ie7和遨游缝左；其他（ie8 chrome ff safari opera等）
ie6認(rèn)識的hack是下劃線_和星號*-
ie7遨游認(rèn)識的hack是星號*（包括上面問題6中的!important也算是hack的一種亿遂。不過實用性較小浓若。）1.比如這樣一個
css設(shè)置height:300px;*height:200px;_height:100px;
2.ie6瀏覽器在讀到height:300px的時候會認(rèn)為高時300px；繼續(xù)往下讀蛇数，他也認(rèn)識*heihgt挪钓， 所以當(dāng)ie6讀到*height:200px的時候會覆蓋掉
3.前一條的相沖突設(shè)置，認(rèn)為高度是200px苞慢。繼續(xù)往下讀诵原，ie6還認(rèn)識_height,所以他又會覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px挽放；
4.ie7和遨游也是一樣的從高度300px的設(shè)置往下讀绍赛。當(dāng)它們讀到*height200px的時候就停下了，因為它們不認(rèn)識_height辑畦。所以它們會把高度
5.解析為200px吗蚌；剩下的瀏覽器只認(rèn)識第一個height:300px;所以他們會把高度解析為300px。
因為優(yōu)先級相同且相沖突的屬性設(shè)置后一個會覆蓋掉前一個纯出，所以書寫的次序是很重要的蚯妇。
/* CSS屬性級Hack */
color:red; /* 所有瀏覽器可識別*/
_color:red; /* 僅IE6 識別 */
*color:red; /* IE6、IE7 識別 */
+color:red; /* IE6暂筝、IE7 識別 */
*+color:red; /* IE6箩言、IE7 識別 */
[color:red; /* IE6、IE7 識別 */
color:red\9; /* IE6焕襟、IE7陨收、IE8、IE9 識別 */
color:red\0; /* IE8鸵赖、IE9 識別*/
color:red\9\0; /* 僅IE9識別 */
color:red \0; /* 僅IE9識別 */
color:red!important; /* IE6 不識別!important 有危險*/
/* CSS選擇符級Hack */
*html #demo { color:red;} /* 僅IE6 識別 */
*+html #demo { color:red;} /* 僅IE7 識別 */
body:nth-of-type(1) #demo { color:red;} /* IE9+务漩、FF3.5+、Chrome它褪、Safari饵骨、Opera 可以識別 */
head:first-child+body #demo { color:red; } /* IE7+、FF茫打、Chrome居触、Safari、Opera 可以識別 */
:root #demo { color:red\9; } : /* 僅IE9識別 */
- 越少的浮動老赤，就會越少的代碼饼煞，會有更靈活的頁面，會有擴(kuò)展性更強(qiáng)的頁面诗越。這不多說，歸結(jié)為到一定水平了息堂，浮動會用的較少嚷狞。另外块促，您也會避免使用浮動
+margin的用法。所以床未，越后來越不易遇到這種bug竭翠。
技巧二：padding，marign薇搁，height斋扰，width
注意是技巧，不是方法： 寫好標(biāo)準(zhǔn)頭
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”>盡量用padding啃洋，慎用margin传货，height盡量補(bǔ)上100%，父級height有定值子級height不用100%宏娄，子級全為浮動時底部補(bǔ)個空clear:both的div寬盡量用margin问裕，慎用padding，width算準(zhǔn)實際要的減去padding
技巧三：顯示類（display:block,inline）
1.display:block,inline兩個元素
2.display:block;//可以為內(nèi)嵌元素模擬為塊元素
3.display:inline;//實現(xiàn)同一行排列的的效果
4.display:table;//for FF,模擬table的效果
-
display:block塊元素孵坚，元素的特點是： 總是在新行上開始粮宛；高度，行高以及頂和底邊距都可控制卖宠；寬度缺省是它的容器的100%巍杈，除非設(shè)定一個寬度 -
display:inline就是將元素顯示為行內(nèi)元素，元素的特點是：和其他元素都在一行上扛伍；高筷畦，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度蜒秤，不可改變汁咏。span，a作媚，label攘滩，input，img纸泡，strong和em是inline元素的例子
技巧四：怎樣使一個div層居中于瀏覽器中漂问？
<style type="text/css">
/*
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
} */
</style>
-
div里的內(nèi)容，IE默認(rèn)為居中女揭，而FF默認(rèn)為左對齊蚤假，可以嘗試增加代碼margin: 0 auto;
技巧五：float的div閉合;清除浮動;自適應(yīng)高度
① 例如：＜div id="floatA"> ＜div id="floatB"> ＜div id="NOTfloatC">
- 這里的
NOTfloatC并不希望繼續(xù)平移，而是希望往下排吧兔。(其中floatA磷仰、floatB的屬性已經(jīng)設(shè)置為float:left;) - 這段代碼在
IE中毫無問題，問題出在FF境蔼。原因是NOTfloatC并非float標(biāo)簽灶平，必須將float標(biāo)簽閉合伺通。在＜divclass="floatB">＜div class="NOTfloatC">之間加上＜div class="clear">這個div一定要注意位置，而且必須與兩個具有float屬性的div同級逢享，之間不能存在嵌套關(guān)系罐监，否則會產(chǎn)生異常。并且將clear這種樣式定義為為如下即可：.clear{clear:both;}
②作為外部wrapper的div 不要定死高度,為了讓高度能自適應(yīng)瞒爬，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的box的時候弓柱，高度自適應(yīng)在IE下無效，這時候應(yīng)該觸發(fā)IE的layout私有屬性用zoom:1;可以做到侧但，這樣就達(dá)到了兼容矢空。
例如某一個wrapper如下定義：
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;
}
③對于排版,我們用得最多的css描述可能就是float:left有的時候我們需要在n欄的float div后面做一個統(tǒng)一的背景,譬如:
<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
- 比如我們要將
page的背景設(shè)置成藍(lán)色,以達(dá)到所有三欄的背景顏色是藍(lán)色的目的,但是我們會發(fā)現(xiàn)隨著leftcenterright的向下拉長,而page居然保存高度不變,問題來了,原因在于page不是float屬性,而我們的page由于要居中,不能設(shè)置成float,所以我們應(yīng)該這樣解決：
<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>
再嵌入一個float left而寬度是100%的DIV解決之。
④萬能float 閉合(非常重要!)
將以下代碼加入Global CSS 中,給需要閉合的div加上class="clearfix"即可,屢試不爽俊犯。
/* 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 */
或者這樣設(shè)置：.hackbox{display:table; //將對象作為塊元素級的表格顯示}
技巧六：div嵌套時 y軸上 padding和 marign的問題
-
FF里y軸上 子div到 父div的距離為 父padding+ 子marign -
IE里y軸上 子div到 父div的距離為 父padding和 子marign里大的一個 -
FF里y軸上 父padding=0且border=0時妇多，子div到 父div的距離為0，子marign作用到 父div外面
技巧七：父級盒子的BFC
marign 重合問題： 當(dāng)兩個垂直邊界相遇時燕侠，它們將形成一個邊界者祖。這個邊界的高度等于兩個發(fā)生疊加的邊界的高度中的較大者【钔總的有以下解決方式：
- 外層
padding - 透明邊框
border:1px solid transparent; - 絕對定位
postion:absolute: - 外層DIV
overflow:hidden; - 內(nèi)層DIV加
float:left;display:inline; - 外層DIV 有時會用到
zoom:1;
