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

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

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

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

!important

      !important是針對于火狐等標(biāo)準(zhǔn)瀏覽器特有的hack，IE6不支持該聲明，使用時要提前聲明。例(.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á)到瀏覽器兼容。

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

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

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

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

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

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