相信(xin)很多(duo)的(de)朋友在div+css的(de)頁面制(zhi)作當中都會(hui)遇到這個問題，由于(yu)IE系列瀏覽(lan)器對于(yu)HTML標簽和CSS樣式表的(de)解釋與其(qi)他瀏覽(lan)器會(hui)有所區別(bie)，所以在制(zhi)作頁面的(de)時候經常(chang)會(hui)出(chu)現一(yi)些小BUG，和網頁錯位等(deng)現象，下面站長好站為(wei)大(da)(da)家講解一(yi)寫，在div+css中如何兼容各(ge)大(da)(da)瀏覽(lan)器。

      首先我(wo)們先要檢查相(xiang)應的HTML標簽，如(ru)果你(ni)的標簽錯誤(wu)，無(wu)論你(ni)如(ru)何修改CSS樣式(shi)(shi)，都不會(hui)解決問(wen)題，即使是(shi)老手也經常(chang)會(hui)犯標簽嵌(qian)套錯誤(wu)。CSS樣式(shi)(shi)是(shi)否(fou)(fou)有錯誤(wu)，比如(ru)你(ni)是(shi)否(fou)(fou)少了“;”分(fen)號分(fen)割，是(shi)否(fou)(fou)忘記了“}”結束大括號。HTML中(zhong)是(shi)否(fou)(fou)忘記了DOCTYPE聲明。

      CSS樣式(shi)要(yao)(yao)注意，float元(yuan)素需要(yao)(yao)指(zhi)定固定寬(kuan)度(du)，并(bing)且(qie)要(yao)(yao)清除(chu)浮動(dong)，另外float元(yuan)素不能指(zhi)定margin屬性，因為在(zai)IE6瀏覽(lan)器下存在(zai)BUG，float浮動(dong)元(yuan)素的寬(kuan)度(du)總合要(yao)(yao)小于100%，也就是父(fu)級層的盒子的寬(kuan)度(du)。在(zai)我們(men)新建(jian)一個css的時(shi)候(hou)要(yao)(yao)把所有(you)的標簽都歸于默(mo)認(ren)形式(shi)，也就是padding和margin都要(yao)(yao)設(she)置為0，可以(yi)用(yong)“*”號來還原默(mo)認(ren)樣式(shi)，因為在(zai)各大(da)瀏覽(lan)器中對于默(mo)認(ren)的div、li、ul等(deng)標簽的內外間距解釋(shi)不同，所以(yi)我們(men)要(yao)(yao)全(quan)部設(she)置為0，需要(yao)(yao)的時(shi)候(hou)在(zai)單獨設(she)置。

      但是(shi)(shi)如(ru)果不(bu)管(guan)如(ru)何(he)的(de)檢查，HTML和CSS都沒有問題，但是(shi)(shi)就(jiu)是(shi)(shi)不(bu)兼(jian)容(rong)，那么就(jiu)可以用(yong)各(ge)各(ge)瀏(liu)覽(lan)器(qi)之間的(de)hack來解(jie)決兼(jian)容(rong)上的(de)問題，下(xia)面我給出我個(ge)人比較常用(yong)的(de)一些瀏(liu)覽(lan)器(qi)hack。

!important

      !important是針對于火狐等標準瀏覽(lan)器特(te)有的hack，IE6不支(zhi)持該聲明，使(shi)用時(shi)要提前(qian)聲明。例(.div{ width:100px !important;} .div{ width:50px;})，火狐等標準瀏覽(lan)器的DIV就(jiu)是100像素的寬(kuan)度，而IE6則是50像素的寬(kuan)度。

*html *+html /9

      這三樣(yang)(yang)分(fen)別(bie)為(wei)IE6、IE7、IE8的(de)(de)(de)(de)特有標(biao)簽，這樣(yang)(yang)就可以(yi)分(fen)別(bie)為(wei)IE6、IE7、IE8分(fen)別(bie)設(she)置(zhi)(zhi)不(bu)同的(de)(de)(de)(de)樣(yang)(yang)式，如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 這樣(yang)(yang)設(she)置(zhi)(zhi)的(de)(de)(de)(de)話(hua)，那么(me)IE6的(de)(de)(de)(de)寬度(du)是100像(xiang)素，IE7的(de)(de)(de)(de)寬度(du)為(wei)90像(xiang)素，IE8的(de)(de)(de)(de)寬度(du)為(wei)80像(xiang)素，這樣(yang)(yang)如果在結合上面的(de)(de)(de)(de)!Important，那么(me)就可以(yi)徹底的(de)(de)(de)(de)把IE6、IE7、IE8、火(huo)狐等標(biao)準瀏覽器進行分(fen)別(bie)設(she)置(zhi)(zhi)樣(yang)(yang)式了，從而達到瀏覽器兼容。

      上(shang)面說了(le)各大瀏覽器(qi)的(de)(de)hack，如果(guo)你全部掌握(wo)了(le)，制作出一(yi)個(ge)兼容主流瀏覽器(qi)的(de)(de)網頁是非(fei)常容易的(de)(de)，唯一(yi)的(de)(de)區別(bie)就是CSS的(de)(de)代(dai)碼多一(yi)些(xie)(xie)而已。下面介紹一(yi)些(xie)(xie)在div+css中使用的(de)(de)一(yi)些(xie)(xie)技(ji)巧。

      在CSS中(zhong)(zhong)寫div{ width:100px; margin:0 auto;}可以使DIV塊在整個網頁中(zhong)(zhong)橫向居中(zhong)(zhong)。

      在(zai)(zai)CSS中(zhong)寫(xie)div{ height:20px; line-height:20px;}這樣寫(xie)可(ke)以使(shi)這個DIV中(zhong)的(de)內(nei)容在(zai)(zai)20像素的(de)高度(du)之中(zhong)進行(xing)垂(chui)直居中(zhong)，但是(shi)需要注意的(de)是(shi)，該內(nei)容不可(ke)以換行(xing)，否則在(zai)(zai)火(huo)狐(hu)等瀏覽(lan)器下內(nei)容會重合(he)，而(er)在(zai)(zai)IE瀏覽(lan)器中(zhong)會換行(xing)。

      如(ru)果(guo)需要給(gei)內聯元(yuan)(yuan)素(su)，如(ru)span、a等標(biao)簽設置(zhi)寬度和(he)高度，必(bi)須給(gei)它們(men)設置(zhi)成塊(kuai)元(yuan)(yuan)素(su)，a,span{display:block或inline-block;}前一個是把a和(he)span標(biao)簽改變成塊(kuai)元(yuan)(yuan)素(su)，第二個是把a和(he)span改成內聯塊(kuai)元(yuan)(yuan)素(su)。

      ul、li等元(yuan)素在各大瀏覽器(qi)中都有(you)樣式和(he)padding，所(suo)以在使用前(qian)，應該(gai)進行事先聲(sheng)明。

      清除(chu)float，可以用.clear{ clear:both;}這(zhe)個需要在浮動(dong)結束位置進行設置，也(ye)可以在父標簽中設置 div{ height:1%; overflow:hidden; }這(zhe)樣也(ye)是(shi)可以清除(chu)浮動(dong)的，但是(shi)有(you)的時候不好使，還是(shi)得用第一(yi)種方(fang)法(fa)。