CSS Reset是什麼? 能吃嗎?
世上最遙遠的距離不是生與死，而是網頁在不同瀏覽器差了1個pixel，怎麼調都搞不定!
不少網頁設計人員應該都有過經驗，設計得好好的網頁，換個瀏覽器檢視，排版就出現問題。例如: 用<div>圖檔與背景圖擋的位置精算位移接合圖檔，在Firefox下密合得天衣無綘，但換到IE、Safari檢視，卻左右相差一個Pixel，甚至在IE的不同版本顯示結果也不盡相同，為了一個Pixel，調來調去調成仇，搞到設計人員想跳樓。
究其根源，在於各瀏覽器對元素預設位置設定有些微差異(但隨著大家對HTML/CSS統一標準愈來愈有共識，這問題在新版瀏覽器已沒有那麼嚴重了)，造成呈現結果不同。用一個網頁來實證:
<!DOCTYPE html>
<html>
<head>
<title>CSS Reset</title>
<style type="text/css">
#main
{
margin-top: 5px; margin-left: 5px;
background-color: Green;
width: 400px; height: 300px;
color: Yellow;
}
</style>
</head>
<body style="background-image:url('bg.gif')">
<div id="main">
<p>Darkthread<br />黑暗執行緒</p>
</div>
</body>
</html>
分別用IE9(IE7相容模式)、IE9(IE9標準模式)、Chrome、Firefox檢視網頁，我故意用可突顯出Pixel位移的格子圖當成<body>背景，並在右側放上<div>左上角的500%放大圖。可以看到IE9(IE7相容)看到的<div>左上角在兩條綠色線交叉點的右方，而其餘瀏覽器則是在紅藍線交叉點的右方。由此實驗可驗證"網頁在不同瀏覽器下檢視結果可能會有排版位置上的差異，但在新版瀏覽器間已漸趨一致"，關於新版瀏覽器這點，發現這個測試除了IE9(IE7相容)有差異外，其餘IE9(IE8相容)、IE9(IE9標準)、Firefox 5、Chrome 12、Opera 9、Safari 5下都已經一致(但針對其他的排版情境或瀏覽器用其他版本，還是可能存在顯示差異)。
為了解決這個問題，就有人提出CSS Reset的構想，透過一組CSS設定，先把網頁各元素的margin等預設值統統歸零，排除不同瀏覽器間的預設值差異，在做網頁排版設計時就比較不會踩到跨瀏覽器的地雷。至於該把哪些設定歸零，有人用現成的建議，也有人調配自己偏好的專屬設定，CSS-TRICKS在2008年曾做過一個迷你民調(只有13個樣本)，27%的人選擇CSS 大師Eric A. Meyer建議的版本，有趣的是，第二高選項，有26%的人選擇"CSS Reset是什麼? 能吃嗎?"；而近年來，陸續有一些CSS Framework開始流行，例如: Blueprint, 960 Grid System… 等等，也都會涵蓋CSS Reset的議題。不過，我自己程式寫得多、排版設計搞得少，也算CSS麻瓜一枚，無法再給更深入的剖析介紹，只能推薦一些參考文章: (如前述說明有謬誤之處，也請網頁設計高手出手指正)
針對先前的實驗，我們將Eric Meyer的CSS Reset設定存成default.css並在網頁中引用，套用後全部的瀏覽器顯示就一致囉!
CSS Reset可以解決瀏覽器的CSS預設值差異，不過對於沒使用過的設計人員來說，要花點時間適應。例如: 由於margin都預設為0px，原本元素左上角預設的留白會消失，現在必須額外加上保持美觀。另外，<ol>、<ul>被設定list-style: none;，因此<ol><li>A</li><li>B</li><li>C</li></ol>預設不會出現1, 2跳號數字，如有需要得特別加上CSS設定。雖然多了一些手續，但養成習慣後，應該不致造成困擾。