網(wǎng)頁美工設(shè)計(jì)

DIV+CSS解決IE6，IE7，IE8，F(xiàn)F兼容問題

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

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

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