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


Comments

# by dxjd4

css reset 的確有其必要,現在是都使用 Eric Meyer 的版本 真的可以非常大幅度減低相容性的問題 不過他設的 vertical-align: baseline; 有時候會造成在 IE6底下,一些東西的對齊不正確就是了 另就是要配合Doctype才能更正確的解決IE的問題 http://www.w3schools.com/xhtml/xhtml_dtd.asp

# by jain

好棒ㄚ~~趕快記下來用。

# by ChaN

黑暗大,可是這樣會不會造成另一個問題 譬如說有編輯器的畫面,客戶在編輯器確實使用了 ul 排版 但用了這個 reset 我想他會將客戶編輯好得內容吃掉對吧? 再加上 CSS 並沒有「排除」繼承的設定 請問黑暗大對這個問題有解嗎?

# by Jeffrey

to ChaN, 套用CSS Reset後一定會讓原本的排版位置產生差異,依我的認知,是本質上註定會發生的結果(因為這本來就引用CSS Reset的目的)。最近的案子就經歷類似狀況,我們採行的做法是配合CSS Reset調整原本設計,如此才能享有CSS Reset的好處;而比較有效率的做法是設一組defaultUL之類的規則,為每個<ul class="defaultUL">一下就可以解決問題,工程不算大。 如果某些頁面的修改成本很高,我想也可改變策略,選擇性套用CSS Reset而不要全網站實施,略過某些不易修改的頁面,可節省一些修改成本,但也就享受不到CSS Reset的好處了。(另一種做法是另外設一組模擬未CSS Reset前的Style設定,套用在某個Container上,將網頁元素放進這個保留區裡就可以假裝沒有CSS Reset,但似有脫褲子放屁的嫌疑就是了)

# by yehmy

我不會網頁程式設計, 只是有一個期望 , 請問 可否實現 ? 如何去實現? 瀏覽到的網頁不是 黑底綠字 時 , 用一個巨集 1. 把網頁內容另存新檔 2.更改新檔的內容為 A.顯示成 黑底綠字 B 停止畫面中的動畫 3. 顯示新檔的內容. 或者版主有更好的方法 ?

# by Jeffrey

to yehmy, Firefox, Chrome, IE等瀏覽器有GreaseMonkey, Trixie之類的外掛,可以在瀏覽特定網頁時執行自訂的邏輯去變動調整網頁的內容、樣式等等,應可滿足你的需求,但開發自訂邏輯需要一點Javascript基礎就是了。參考: http://blog.darkthread.net/post-2007-06-06-tools-trixie-customize-your-web-surfing.aspx

Post a comment


79 + 13 =