div+css兼容各種瀏覽器的方法

首先就是居中問題，說到居中問題，我是嚴重反對使用text-align:center;的方式居中，因為這樣很有可能把其他內容的樣式也給居中了。建議的居中方式是使用margin: 0 auto;同時配合寬度屬性，這樣就可以實現居中了。具體效果可以看看下圖。

padding和margin的區別，這兩個屬性我一直就分不清楚，一直到最近才弄明白。padding是內邊距，margin是外邊距，其實明不明白都不要緊，在使用的時候分別測試就知道了。和margin相關的屬性一共有5個，分別是margin，margin-top，margin-right，margin-bottom，margin-left，margin=margin-top + margin-right + margin-bottom + margin-left，請注意順序是上右下左。margin使用時有3種方法：1、margin : 10px; 表示四個方向都是10px外邊距；2、margin:10px 30px;表示上/下10px外邊距，右/左30px邊距；3、margin:10px 20px 30px 40px;表示上10px外邊距，右20px外邊距，下30px外邊距，左40px外邊距。這些都是很基礎的了，padding用法完全一樣。效果圖如下所示

關於float，不得不說這個東西是造成布局錯位的元兇。IE對float的解析一直就不同於其他非IE內核的瀏覽器，直到IE8才恢復。首先解釋下這個float，就是浮動。要知道網頁中div不可能永遠都是佔一行，很多情況下都是一行中顯示了多個div，要實現這個效果就需要使用到float屬性。在具體說這個東西之前先來看看IE7 IE8 和谷歌對這個屬性的解析，通過這個圖，大家就會明白為什麼自己做的網頁在不同瀏覽器下就是要亂。

以前我一直認為，只要同級的上一個div浮動了，那麼這個div就會自動與上一個div變成同一個高度（在寬度允許的情況下），但是實際上這個是錯誤的。要實現這個效果呢，需要配合margin屬性，就如圖IE7顯示的例子，正確的寫法應該是醬紫的。

float的使用規則，假設同一行需要顯示N個div，那麼第至第N-1個div都需要設置float屬性，第N個div的margin-X（X=float的方向）的大小=前面第1至第N-1個div的寬度總和，需要注意的是，這些div的父級div的寬度，不能小於N個子div的寬度和。當吧這個問題弄清楚以後，布局就不是問題了。至於div之間的距離，那麼只需要增加margin-X的值即可，例如

這樣的寫法完全兼容各種瀏覽器，同樣包括IE6和IE7。

可能你會感到奇怪，在IE7沒有margin-X的值的時候，顯示也是正常的，如果我兼容了高版本的瀏覽器，IE7會不會亂呢？答案就是不會亂，不信可以自己嘗試一下。高度屬性。高度屬性最好不要設置，其默認屬性為自動適應，可以參考各個新聞網站的新聞頁面，不同新聞的內容各不相同，但是新聞頁面的框架都是一樣的，顯示新聞的部分都是自動增長的，為了避免內容跑到框外面去，所以高度屬性都是默認的自動適應。絕對定位與相對定位。其實這個東西我也不明白，一般來說我都是用的相對定位，這樣邏輯比較清晰。div與ul/table。我本人是一般都不用ul，哪怕是菜單欄，能不用table就不用table，除非是100%肯定是列表。因為我覺得這兩者很容易牽一髮而動全身，div則感覺靈活一些。當然這個就是全看自己了。當你把浮動的相關問題解決了的時候，那麼布局的大問題也就沒什麼了關於網頁開發的建議：盡量不要使用IE，因為IE的解析和其他瀏覽器解析有差異的，一般來說其他瀏覽器沒問題，那麼IE就沒問題，但是IE沒問題不見得其他瀏覽器沒問題。推薦分別下載谷歌瀏覽器、火狐瀏覽器、opera瀏覽器和蘋果瀏覽器。
推薦閱讀：