相信很多的朋友在div+css的頁(yè)面制作當(dāng)中都會(huì)遇到這個(gè)問(wèn)題，由于IE系列瀏覽器對(duì)于HTML標(biāo)簽和CSS樣式表的解釋與其他瀏覽器會(huì)有所區(qū)別，所以在制作頁(yè)面的時(shí)候經(jīng)常會(huì)出現(xiàn)一些小BUG，和網(wǎng)頁(yè)錯(cuò)位等現(xiàn)象，下面站長(zhǎng)好站為大家講解一寫，在div+css中如何兼容各大瀏覽器。

      首先我們先要檢查相應(yīng)的HTML標(biāo)簽，如果你的標(biāo)簽錯(cuò)誤，無(wú)論你如何修改CSS樣式，都不會(huì)解決問(wèn)題，即使是老手也經(jīng)常會(huì)犯標(biāo)簽嵌套錯(cuò)誤。CSS樣式是否有錯(cuò)誤，比如你是否少了“;”分號(hào)分割，是否忘記了“}”結(jié)束大括號(hào)。HTML中是否忘記了DOCTYPE聲明。

      CSS樣式要注意，float元素需要指定固定寬度，并且要清除浮動(dòng)，另外float元素不能指定margin屬性，因?yàn)樵贗E6瀏覽器下存在BUG，float浮動(dòng)元素的寬度總合要小于100%，也就是父級(jí)層的盒子的寬度。在我們新建一個(gè)css的時(shí)候要把所有的標(biāo)簽都?xì)w于默認(rèn)形式，也就是padding和margin都要設(shè)置為0，可以用“*”號(hào)來(lái)還原默認(rèn)樣式，因?yàn)樵诟鞔鬄g覽器中對(duì)于默認(rèn)的div、li、ul等標(biāo)簽的內(nèi)外間距解釋不同，所以我們要全部設(shè)置為0，需要的時(shí)候在單獨(dú)設(shè)置。

      但是如果不管如何的檢查，HTML和CSS都沒(méi)有問(wèn)題，但是就是不兼容，那么就可以用各各瀏覽器之間的hack來(lái)解決兼容上的問(wèn)題，下面我給出我個(gè)人比較常用的一些瀏覽器hack。

!important

      !important是針對(duì)于火狐等標(biāo)準(zhǔn)瀏覽器特有的hack，IE6不支持該聲明，使用時(shí)要提前聲明。例(.div{ width:100px !important;} .div{ width:50px;})，火狐等標(biāo)準(zhǔn)瀏覽器的DIV就是100像素的寬度，而IE6則是50像素的寬度。

*html *+html /9

      這三樣分別為IE6、IE7、IE8的特有標(biāo)簽，這樣就可以分別為IE6、IE7、IE8分別設(shè)置不同的樣式，如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 這樣設(shè)置的話，那么IE6的寬度是100像素，IE7的寬度為90像素，IE8的寬度為80像素，這樣如果在結(jié)合上面的!Important，那么就可以徹底的把IE6、IE7、IE8、火狐等標(biāo)準(zhǔn)瀏覽器進(jìn)行分別設(shè)置樣式了，從而達(dá)到瀏覽器兼容。

      上面說(shuō)了各大瀏覽器的hack，如果你全部掌握了，制作出一個(gè)兼容主流瀏覽器的網(wǎng)頁(yè)是非常容易的，唯一的區(qū)別就是CSS的代碼多一些而已。下面介紹一些在div+css中使用的一些技巧。

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

      在CSS中寫div{ height:20px; line-height:20px;}這樣寫可以使這個(gè)DIV中的內(nèi)容在20像素的高度之中進(jìn)行垂直居中，但是需要注意的是，該內(nèi)容不可以換行，否則在火狐等瀏覽器下內(nèi)容會(huì)重合，而在IE瀏覽器中會(huì)換行。

      如果需要給內(nèi)聯(lián)元素，如span、a等標(biāo)簽設(shè)置寬度和高度，必須給它們?cè)O(shè)置成塊元素，a,span{display:block或inline-block;}前一個(gè)是把a(bǔ)和span標(biāo)簽改變成塊元素，第二個(gè)是把a(bǔ)和span改成內(nèi)聯(lián)塊元素。

      ul、li等元素在各大瀏覽器中都有樣式和padding，所以在使用前，應(yīng)該進(jìn)行事先聲明。

      清除float，可以用.clear{ clear:both;}這個(gè)需要在浮動(dòng)結(jié)束位置進(jìn)行設(shè)置，也可以在父標(biāo)簽中設(shè)置 div{ height:1%; overflow:hidden; }這樣也是可以清除浮動(dòng)的，但是有的時(shí)候不好使，還是得用第一種方法。