相信很多的朋友在div+css的頁面制作當中都會遇到這個問題,由于IE系列瀏覽器對于HTML標簽和CSS樣式表的解釋與其他瀏覽器會有所區別,所以在制作頁面的時候經常會出現一些小BUG,和網頁錯位等現象,下面站長好站為大家講解一寫,在div+css中如何兼容各大瀏覽器。
首先我們先要檢查相應的HTML標簽,如果你的標簽錯誤,無論你如何修改CSS樣式,都不會解決問題,即使是老手也經常會犯標簽嵌套錯誤。CSS樣式是否有錯誤,比如你是否少了“;”分號分割,是否忘記了“}”結束大括號。HTML中是否忘記了DOCTYPE聲明。
CSS樣式要注意,float元素需要指定固定寬度,并且要清除浮動,另外float元素不能指定margin屬性,因為在IE6瀏覽器下存在BUG,float浮動元素的寬度總合要小于100%,也就是父級層的盒子的寬度。在我們新建一個css的時候要把所有的標簽都歸于默認形式,也就是padding和margin都要設置為0,可以用“*”號來還原默認樣式,因為在各大瀏覽器中對于默認的div、li、ul等標簽的內外間距解釋不同,所以我們要全部設置為0,需要的時候在單獨設置。
但是如果不管如何的檢查,HTML和CSS都沒有問題,但是就是不兼容,那么就可以用各各瀏覽器之間的hack來解決兼容上的問題,下面我給出我個人比較常用的一些瀏覽器hack。
!important
!important是針對于火狐等標準瀏覽器特有的hack,IE6不支持該聲明,使用時要提前聲明。例(.div{ width:100px !important;} .div{ width:50px;}),火狐等標準瀏覽器的DIV就是100像素的寬度,而IE6則是50像素的寬度。
*html *+html /9
這三樣分別為IE6、IE7、IE8的特有標簽,這樣就可以分別為IE6、IE7、IE8分別設置不同的樣式,如*html div{ width:100;} *+html div{ width:90px;} div{ width:80px/9;} 這樣設置的話,那么IE6的寬度是100像素,IE7的寬度為90像素,IE8的寬度為80像素,這樣如果在結合上面的!Important,那么就可以徹底的把IE6、IE7、IE8、火狐等標準瀏覽器進行分別設置樣式了,從而達到瀏覽器兼容。
上面說了各大瀏覽器的hack,如果你全部掌握了,制作出一個兼容主流瀏覽器的網頁是非常容易的,唯一的區別就是CSS的代碼多一些而已。下面介紹一些在div+css中使用的一些技巧。
在CSS中寫div{ width:100px; margin:0 auto;}可以使DIV塊在整個網頁中橫向居中。
在CSS中寫div{ height:20px; line-height:20px;}這樣寫可以使這個DIV中的內容在20像素的高度之中進行垂直居中,但是需要注意的是,該內容不可以換行,否則在火狐等瀏覽器下內容會重合,而在IE瀏覽器中會換行。
如果需要給內聯元素,如span、a等標簽設置寬度和高度,必須給它們設置成塊元素,a,span{display:block或inline-block;}前一個是把a和span標簽改變成塊元素,第二個是把a和span改成內聯塊元素。
ul、li等元素在各大瀏覽器中都有樣式和padding,所以在使用前,應該進行事先聲明。
清除float,可以用.clear{ clear:both;}這個需要在浮動結束位置進行設置,也可以在父標簽中設置 div{ height:1%; overflow:hidden; }這樣也是可以清除浮動的,但是有的時候不好使,還是得用第一種方法。