解決 IE 與 Firefox 等瀏覽器衝突 ─ Reset CSS

相信大家一定都有在網頁設計時，因為所使用的瀏覽器不同或版本不同，導致頁面的顯示結果不同的情況發生吧!這是因為各家瀏覽器對於 CSS 樣式表有著各自的預設值，如果有沒定義到的地方，各家瀏覽器就會依照自己的預設值去給 HTML 使用，這樣就會造成版面的混亂，這時候就需要 Reset CSS 了。

Reset CSS 其實是一段 CSS 語法，他先把各家瀏覽器的設定值都調到一樣，這樣你在開始寫CSS 的時候，就可以不用擔心因為瀏覽器的不同造成不同的效果，當然還是會有例外的情況(例如某版本瀏覽器的margin就是硬是要是別人的兩倍XD)，這種瀏覽器本身的BUG造成頁面顯示和預期的不一樣的情況，就不是 Reset CSS 可以解決的，那種時候就要靠其他的方法來解決。

套用 Reset CSS 的方法有兩個

方法一：HTML直接連結CSS

在HTML原始檔中＜/head＞之前加入下面這段的語法

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css"/ >

方法二：直接加入CSS樣式表中

在CSS原始檔中加入下面這段的CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td { margin:0;padding:0; }
table { border-collapse:collapse;border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal;font-weight:normal; }
ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; }
abbr,acronym { border:0; }

你問我這有用嗎?這方法是Yahoo提供的，畢竟人家也是間大公司，還是值得用一下的，我個人的使用經驗是還頗良好的。

Reference： Yahoo! Developer Network