DIV+CSS解決IE6，IE7，IE8，FF兼容問(wèn)題

編輯：時(shí)間：2012-03-13 20:10:43

驗 DIV+CSS解決IE6，IE7，IE8，FF兼容問(wèn)題
那我來(lái)說(shuō)說(shuō)吧，經(jīng)常用到DIV+CSS，也積累了不少解決兼容問(wèn)題的方法，我這里只說(shuō)現在主流的幾個(gè)，（IE6，IE7，IE8，FF）其它的沒(méi)去研究過(guò)
1.ie8下兼容問(wèn)題，這個(gè)最好處理，轉化成ie7兼容就可以。在頭部加如下一段代碼，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />

2.flaot浮動(dòng)造成IE6下面雙倍邊距問(wèn)題，這個(gè)最常見(jiàn)，也最好處理，!important解決，比如
margin-left:10px !important;;
margin-left:5px;
+height:120px;
5.有時(shí)候，會(huì )在布局的時(shí)候，發(fā)現，有一個(gè)DIV浮動(dòng)了，接下來(lái)的一個(gè)DIV本來(lái)是要在下面顯示的，結果跑上面去了，這種情況一般在FF下面會(huì )出現，解決的辦法就是清除一下浮動(dòng)，在設置過(guò)浮動(dòng)的那個(gè)DIV下面加一個(gè)DIV，CSS面寫(xiě)個(gè)clear:both;如下<div style="float:left;height:100px;
width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6. 再就是居中問(wèn)題，這個(gè)問(wèn)題在新手身上很多，主要原因是對盒子模型不夠理解，沒(méi)熟記盒子模型，如果發(fā)現你的頁(yè)面沒(méi)有局中，我現在知道的，有這幾個(gè)原因：1. 一個(gè)是沒(méi)盒子，就是BODY后的一個(gè)大DIV把所有DIV裝起來(lái)的那個(gè)，你沒(méi)寫(xiě)。2.就是你寫(xiě)了，但是寬度沒(méi)用絕對寬度：而是用一個(gè)相對的寬度，想局中，必須用絕對寬度。-
7.擴展：如果我想在設計的時(shí)候，實(shí)現IE6，IE7,FF下出現三種不同的效果，比如IE6下背景紅色，IE7下藍色FF下綠色，這里，我自己試過(guò)，可以，用兼容的方法（注意順序，可以好好理解一下）。7 L& t- o7 k- a1 I
background:red;
+background:blue !important;
+background:green;
在這里，我想說(shuō)一下，雖然兼容給你帶來(lái)很多郁悶，讓人心煩，但同時(shí)，在你做多了后，你會(huì )發(fā)現，兼容有時(shí)候會(huì )滿(mǎn)足你很多不好達到的效果，就像最后一個(gè)，要做那種效果，不用兼容的方法，那你就JS去吧，JS還得想想FF和IE下的不同，當然，JS的兼容，我也不會(huì )，我沒(méi)去研究過(guò)。以后的事，先把CSS+DIV學(xué)熟再說(shuō)。
多做，做練，始終把盒子模型放在心中，才會(huì )熟練，才會(huì )運用自如，才會(huì )在做的時(shí)候，自然而然就知道哪里會(huì )有兼容問(wèn)題，直接在測試前就解決掉那些最常見(jiàn)的兼容問(wèn)題。