CSS Reset是什麼? 能吃嗎?

标签： CSS | 发表时间：2011-07-22 06:40 | 作者：Jeffrey 達

出处：http://blog.darkthread.net/blogs/darkthreadtw/default.aspx

世上最遙遠的距離不是生與死，而是網頁在不同瀏覽器差了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設定。雖然多了一些手續，但養成習慣後，應該不致造成困擾。

CSS Reset的历史(一）

当艺术家开始准备创作一幅新的画作时，他们不会先去拿镉红或是酞菁蓝的颜料，而是会首先准备好一张新的画布，为什么. 因为对于他们来说，首先需要确保新画布足够平展并且洁净. 许多Web设计师也喜欢使用CSS Reset来”准备“他们的浏览器画布，以确保他们的设计能够在不同的浏览器和系统下拥有同样的呈现. 这篇文章是关于CSS reset的系列文章的第一篇.