標準-HTML & CSS差異比較整理-分享2U

I 有關長寬的標準 - width & height 　　
ＣＳＳ２中的 height 和 width 屬性是用來定義一個區塊物件(block)其內容(content) 的長與寬。請注意，這並非指整個區塊物件，也就是說padding跟border的大小並不會被計入。 當然這是標準的情況；我們都曉得有個叫做Mozilla的瀏覽器很「標準」。至於IE的情況呢？他 將padding計入長與寬，於是這便造成了差異。妥協的方案就是在區塊物件內再置入一個區塊物 件，把內部的區塊物件的padding 和 border 設成零。有另一種方法是利用IE對CSS的parsing bug來完成。比方說想要width=300px，border=20px，padding=30px的區塊，就額外加入這個樣式：

div.content {
    width:400px;
    voice-family: "\"} 舊版瀏覽器視此為 結束符號 
    \"";
    voice-family:inherit;
    width:300px;
}

然後，為了避免有相同bug但對區塊模型有正確解釋的opera被設為width=400，加入下面這段：

html>body .content {
     width:300px;
}

IE跟opera會因為voice-family的parsing error而停止處理接下來的樣式(width=300px)，但其他的 瀏覽器則會繼續處理。而opera會因為再下一個樣式而得到正確的寬度值，IE仍因parsing error而 維持width=400。簡單的說，這是一種「if(IE) width=400; else width=300;」的動作；雖然我覺得 這並不是好方法，但總而言之可以用，而且「比起寫兩個div」方便多了，是吧？


II 有關溢出的標準 - overflow 　　
ＣＳＳ２中的overflow屬性預設為visible。visible的動作是指當內容長大於區塊長時， 內容將可以畫到區塊外。語意是「區塊不該自動變長」。所以如果我們將區塊的長度設得小於 內容長度時，區塊之後的物件就會跟區塊內容重疊了。但是IE不是這樣；IE在這種情況下會自 動將height變為auto屬性，也就是隨著內容長而變，所以不會發生這樣的情況。妥協的方法就 是不要設height，或是將overflow設為scroll、hidden等其它屬性。


III 有關對齊的標準 - alignment 　　
center對HTML4.01來說是一個「deprecated」的標籤，他也建議使用div的align屬性(align=center)或著利 用ＣＳＳ的「text-align」屬性來作出center的效果。但是經過實驗，以align和text-align模擬center，使用 Mozilla瀏覽將無法把block box置中對齊。查證過specification之後，推測是由於text-align及align屬性都只能對in-line box發生作用(像是span標籤)；這時候，若是一個block box(例如 div)想要置中，就非得靠center標籤了。另一個選擇性的做法則是利用left跟width屬性達成。例如下面這個例子，就可以得到一個在網頁正中 央的div標籤。
<div style="position:absolute;top:30%;left:30%;height:40%;width:40%;">

IV 有關對齊的標準 - alignment (2)　　
事實上，除了利用left以外，你也可以利用設定margin來達到 block elbent 對齊的效果。 ＣＳＳ spec 明確的告訴我們當 margin-left以及margin-right兩者皆設為auto時，則兩者值將會一樣。 另外，若是margin有一者為auto，他將根據
parent container width=padding width + border width + margin width + block width
設定其auto的值。於是，只要將margin-left以及margin-right兩者皆設為auto，再設定width的值，就可以得到一個置中的block elbent了。( 請參閱 CSS2 spec 10.3.3 )
<div style="width:100px;margin-left:auto;margin-right:auto">


V 有關行高的標準 - line-height 　　
當我們插入了一個區塊標籤(例如div)，如果裡面不放任何東西的話會是個什麼樣的情況呢？ Firefox會將之視為空的，而IE卻會替這個區塊預留一個高度 - 就是 line-height。當我們將這個 line-height設為0px之後，兩個瀏覽器便有同樣的表現了；但是如果此時再塞東西到這個標籤中， 又會發生什麼事呢？Firefox會把這個字顯示出來，但是IE卻不會顯示。這真是個困擾網頁設計者 的"小"問題阿。


VI 有關項目的標準 - list 　　
在某些情況下， IE 的列表 (list) 項目之間會有額外的空格。
li a {display:block;}
li {width:100px;}
這樣的 css 設定就可以讓含超連結的項目下多出空格，除非你把兩個項目之間無間格地接在 同一行。另外一個方法就是不要用列表，用 div 刻一個出來。當然你也可以選擇不要堅持把 超連結標籤的顯示屬性設為 block。


V 有關置中的標準 - margin:auto　　
當你用 XHTML 1.0 寫網頁的時候，前面會不會加上 <?xml> 標籤呢？ 如果你加了 <?xml> ，那麼原本用 margin:0 auto; 置中的網頁就會喪失效果 ，變成靠在左邊了。不過這是指 IE ， Firefox 還是會好好的。

使用margin:auto...IE6使用上會有bug
使用<?xml>的情況下...在<?xml>之前加上<!DOCTYPE>之後，IE會變正常
不使用<?xml>的情況下...如果不加<!DOCTYPE>這個標籤，margin:auto也會有問題。

結論： IE6要讓margin:auto正常，<!DOCTYPE>要擺在第一行。