網路就像高速公路一樣錯綜複雜，但只要懂得方法、掌握路況，就能輕鬆上路、自在悠遊。

回上一頁

首頁操作指南網頁編輯的知識及技巧瀏覽器異常現象及解法

為什麼明明是這樣設定的，但實際呈現效果就是有出入，原因在那裡？
你常有這樣的疑問嗎？
那麼這裡整理的瀏覽器怪現象就不得不注意了。

• 表格欄位寬度與設定不符
  影響範圍：IE、Google Chrome、Safari
  部份瀏覽器在儲存格跨欄的情況下，也就是以 COLSPAN 方式(合併儲存格)讓某欄位橫跨數個欄位寬度時，並且放入圖片後就會造成欄位寬度出現異常。例如下方表格：
  

  欄位寬度100%的跨欄儲存格
  欄位寬度50%的儲存格。	欄位寬度50%的儲存格，按理說這一欄的寬度應該永遠和左邊相同，但在IE卻會不同。

  欄位寬度100%的跨欄儲存格，但不含圖片
  欄位寬度50%的儲存格。	欄位寬度50%的儲存格。

  上面二個表格是一模一樣的設定，但紅色的儲存格中放入一張圖片，就造成瀏覽器的顯示異常。
  
  解決方式：就是把表格一分為二或者大包小，避免這類的情況發生，簡單、有效即可。
  大包小之示範如下：
  

  欄位寬度100%的跨欄儲存格

  欄位寬度50%的儲存格。 欄位寬度50%的儲存格。

   
• php 的 utf8 網頁出現亂碼？
  不少網友向我們詢問為何用 php 編輯的 UTF-8 網頁會出現亂碼？
  可能的原因有二：
  

  1. 幾種 BOM 格式

     Bytes	Encoding Form
     00 00 FE FF	UTF-32, big-endian
     FF FE 00 00	UTF-32, little-endian
     FE FF	UTF-16, big-endian
     FF FE	UTF-16, little-endian
     EF BB BF	UTF-8

     php 檔的 BOM(Byte-Order Mark) 標記問題。
     部份網頁編輯器（例如 DreamWaver）在儲存 unicode 編碼的檔案時可以選擇是否加入BOM標記，然而在 php 輸出網頁內容時並未將這個不屬於 HTTP 協定的特殊字元移除，造成瀏覽器的顯示異常。
     這個問題可以從取消存檔時寫入 BOM 標記來解決，而未來新的 php 版本也會在輸出網頁前自動移除。
      
  2. 網頁伺服器 DefaultCharset 和 php 編碼的衝突。
     網頁伺服器有預設的字碼輸出設定，而網頁也可以自行設定，這原本再正常不過了。但當二者不一致時，部份瀏覽器無法正確判斷內容的字碼，而選擇錯誤的結果就是亂碼。這個情況可能發生在同一網站裡包含不同字碼的網頁時，或者伺服器的設定與網頁內容產生衝突（例如網頁由 Big5 昇級到 UTF-8，但卻未要求主機商將伺服器調整為 UTF-8 編碼）。
     解決的方式是確定二者設定的一致，並且在輸出 php 前，先透過
     header("Content-type: text/html; charset=UTF-8") ; /* 指定輸出 UTF-8 內容 */
     來強制輸出字碼。
      
     
• 網頁內容的定位控制
  影響範圍：IE
  許多情況下可以發現 IE 瀏覽器在顯示利用 float 指令來控制內容定位的網頁時，會出現和一般瀏覽器有很大差異的情況，主要的原因在於 IE 瀏覽器並不會預設內容的 position 參數為 relative。
  因此在設計上，務必記得清楚定義各區塊的定位方式，就能避免這些問題發生。