為什麼同一個網站在不同瀏覽器不一樣？
差異是正常的，不是做壞了
先建立這個認知：同一個網站在不同瀏覽器上有細微差異，是網頁的常態。
合理的目標不是「像素完全一致」，而是：
- 所有功能都能正常使用
- 版面沒有破損或重疊
- 文字清晰可讀
- 整體視覺印象一致
追求完全一致的代價很高，而且效益有限。
差異的五個來源
一、預設樣式不同
每個瀏覽器對基本元素都有自己的預設樣式——標題的大小、段落的間距、清單的縮排、按鈕的外觀。
網頁設計通常會用一套基礎設定來抹平這些差異，但無法做到百分之百。
二、字體的呈現
同一個字體在不同作業系統上的算繪方式不同，會造成：
- 粗細看起來略有差異
- 字距與行高略有不同
- 整段文字的長度可能不一樣，導致換行位置不同
如果某段文字剛好卡在換行邊緣，不同瀏覽器可能一個換行一個不換——這是常見的細微差異。
三、表單元件的外觀
下拉選單、核取方塊、日期選擇器、檔案上傳按鈕，各瀏覽器與各作業系統的長相都不同。
要統一外觀需要額外的開發，而且可能犧牲原生的操作便利性——尤其在手機上。
四、新技術的支援程度
網頁技術持續發展，新的功能不會同時在所有瀏覽器上可用。
常見的處理方式是「漸進增強」——基本功能所有瀏覽器都能用，較新的效果只在支援的瀏覽器上呈現。
這是合理的做法：舊瀏覽器的使用者仍能完成所有事情，只是視覺效果較單純。
五、版本差異
即使是同一個瀏覽器，新舊版本的行為也可能不同。企業環境中鎖定舊版本的情況不少見。
哪些差異需要處理
| 情況 | 是否要處理 |
|---|---|
| 間距差幾像素 | 通常不必 |
| 字體粗細略有不同 | 通常不必 |
| 下拉選單外觀不同 | 視需求 |
| 文字重疊或超出範圍 | 要處理 |
| 按鈕無法點擊 | 要處理 |
| 表單送不出去 | 要處理 |
| 圖片不顯示 | 要處理 |
| 版面完全跑掉 | 要處理 |
判斷原則
影響「能不能用」的要處理，只影響「好不好看」的細微差異可以接受。
驗收時用這個標準溝通，會比「跟設計稿不一樣」更有效率。
手機與電腦本來就不同
這不是相容性問題，而是刻意的設計。
響應式設計會依螢幕寬度調整版面——手機上是一欄式、選單收合；電腦上是多欄並排。內容是同一份，只是排法不同。
常見的誤會
「手機版跟電腦版不一樣，是不是做錯了？」——不一樣才是正確的。 把電腦版整個縮小塞進手機才是問題。
為什麼設計稿與實際網頁會有落差
設計稿是固定尺寸的圖片，網頁則是會隨螢幕大小變化的。所以：
- 設計稿只能呈現特定寬度下的樣子
- 實際網頁要適應各種寬度
- 文字量不同時，版面高度會變動
- 字體在不同系統上的呈現略有差異
合理的驗收方式
比對「設計意圖是否實現」，而不是逐像素比對。
例如：層級關係對不對、重點是否突出、間距是否協調——這些比「這裡差兩個像素」更有意義。
常見的具體差異情境
文字換行位置不同
字體算繪差異造成，通常可以接受。若標題剛好斷在奇怪的地方，可以調整文案或設定。
陰影或圓角略有不同
細微的算繪差異，一般不需處理。
影片無法自動播放
多數瀏覽器基於使用者體驗的考量，限制帶聲音的自動播放。 這是刻意的設計，不是錯誤。
常見的處理是預設靜音播放，並提供開啟聲音的按鈕。
字體沒有正確顯示
可能是網頁字型載入失敗，或該字體在系統上不存在而回退到替代字體。
驗收時的實務建議
- 先用主要的瀏覽器確認功能都正常
- 再用第二種瀏覽器確認沒有破版
- 手機實機測試——不要只用電腦縮小視窗
- 把「不能用」與「不好看」分開列
第四項能大幅提升溝通效率。 廠商會優先處理功能問題，視覺細節則可以討論是否值得投入。
各瀏覽器的版本、介面與支援情況持續更新，本文說明的是原則與判斷方式。實際的操作位置可能因版本而略有差異。