Web標準化對各瀏覽器相容問題

※ 整理自 葉信設計門戶站 www.iebyte.com

1 縮排

為了減小DIV佈局的層數，一般我們喜歡用一些標籤諸如：dl, dt, dd, ul等來實現
但是他們都會或多或少的有縮排
縮排的意思就是指當你不對其定義margin和padding的時候，他自己屬性附帶一些間距，所以如果你不定義，在實際操作中也會出現間距！

解決他們的辦法就是在DIV佈局之前，先全局定義 margin:0px; padding:0px;

需要定義的標籤有： dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, strong, b, p 等
這樣先定義了之後，以後再使用他們的時候就可以像DIV那樣重新定義間距，而不用怕莫名其妙的多餘間距

2 消除浮動

浮動可以說是導致網頁變形的罪魁禍首了
所以在定義了浮動以後，完成浮動的代碼後面要加上消除浮動，否則下面的DIV框會繼承浮動，導致變形

一般是全局定義一個DIV ，寫上： style="clear:both", 或者單建一個標籤，對其定義消除浮動，在有浮動層的DIV最後調用這個標籤。

對於更嚴謹的消除浮動方法我推薦使用以下方法：這樣可以保證浮動一定能完全消除，雖然會增加代碼量，但是可以保證佈局疏忽時候忘記寫消除浮動！

對於浮動在左邊的容器;
寫完float:left以後在下面直接寫：clear:left;

對於浮動在右邊的容器;
寫完float:left以後在下面直接寫：clear:right;

對於浮動在中間的容器;
寫完float:left以後在下面直接寫：clear:none; 無論中間浮動有多少容器，只要不是左右浮動，就寫none;

3 外包容器

當一個DIV容器裡面有浮動的時候，如果不給這個外包容器定義高度，那麼這個容器在不同瀏覽器顯示的時候，一定會變形
解決的方法就是給這個外包容易定義高度

如果你在定義的時候，不確定外包容易的高度的時候，比如文章有多有少不能確定高度那麼可以給其這麼限定高度, 以下代碼要一起寫上才能保證定義高度的效果：

Min-height: 高度； max-height: 高度；overflow:auto;

4 內容過長導致變形

有時網站的內容變長會導致寬度大於限定的寬度導致小容器變形
所以最好給容器定義上： overflow:hidden;

5 不同瀏覽器下顏色的顯示

對於不同瀏覽器可能會對顯示的顏色有所差異
所以在最開始全局定義顏色 推薦全局定義的標籤有：a, a:hover, a:visited

6 表單

表單也是一個特別容易因為縮進而變形的容器， form標籤！
所以最好在開始對form標籤定義：margin:0px;

7 寬高容器

很多時候可以使用除了DIV的標籤來定義容易，其一是為了減小代碼量，其二是為了減少DIV層數
可以當作div來使用的寬高容器有： dl, dt, dd, b, strong, ul, li (li 要先定義： list-style-type:none;)等，其他的可以靠自己來發掘！

8 橫向容器

Em, I, span ,a 等，這些都是橫向容器，要定義高度請用line-height

9 居中

居中一直是網站的首要，大部分站的主題頁面都是居中顯示的
這裡帶來兩種方式:
a 整體容器的居中
使用： margin-left:auto; margin-right:auto; 兩個要同時寫才能實現居中 
(註：直接寫 margin:0 auto; 亦能達到相同的效果)

b 容器內部內容居中
使用text-align:center;就可以了

10 間距設定

為了導致IE和FF對間距的相容
不妨對左右的間距用padding設定，而對上下的間距用margin來設定，這樣能保證兩種瀏覽器下間距顯示一致！