網路就像高速公路一樣錯綜複雜,但只要懂得方法、掌握路況,就能輕鬆上路、自在悠遊。
回上一頁
|
|
首頁操作指南網頁編輯的知識及技巧瀏覽器異常現象及解法
為什麼明明是這樣設定的,但實際呈現效果就是有出入,原因在那裡?
你常有這樣的疑問嗎?
那麼這裡整理的瀏覽器怪現象就不得不注意了。
- 表格欄位寬度與設定不符
影響範圍:IE、Google Chrome、Safari
部份瀏覽器在儲存格跨欄的情況下,也就是以 COLSPAN 方式(合併儲存格)讓某欄位橫跨數個欄位寬度時,並且放入圖片後就會造成欄位寬度出現異常。例如下方表格:
欄位寬度100%的跨欄儲存格
|
欄位寬度50%的儲存格。
|
欄位寬度50%的儲存格,按理說這一欄的寬度應該永遠和左邊相同,但在IE卻會不同。
|
欄位寬度100%的跨欄儲存格,但不含圖片
|
欄位寬度50%的儲存格。
|
欄位寬度50%的儲存格。
|
上面二個表格是一模一樣的設定,但紅色的儲存格中放入一張圖片,就造成瀏覽器的顯示異常。
解決方式:就是把表格一分為二或者大包小,避免這類的情況發生,簡單、有效即可。
大包小之示範如下:
欄位寬度100%的跨欄儲存格
|
欄位寬度50%的儲存格。
|
欄位寬度50%的儲存格。
|
|
- php 的 utf8 網頁出現亂碼?
不少網友向我們詢問為何用 php 編輯的 UTF-8 網頁會出現亂碼?
可能的原因有二:
-
幾種 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 版本也會在輸出網頁前自動移除。
- 網頁伺服器 DefaultCharset 和 php 編碼的衝突。
網頁伺服器有預設的字碼輸出設定,而網頁也可以自行設定,這原本再正常不過了。但當二者不一致時,部份瀏覽器無法正確判斷內容的字碼,而選擇錯誤的結果就是亂碼。這個情況可能發生在同一網站裡包含不同字碼的網頁時,或者伺服器的設定與網頁內容產生衝突(例如網頁由 Big5 昇級到 UTF-8,但卻未要求主機商將伺服器調整為 UTF-8 編碼)。
解決的方式是確定二者設定的一致,並且在輸出 php 前,先透過
header("Content-type: text/html; charset=UTF-8") ; /* 指定輸出 UTF-8 內容 */
來強制輸出字碼。
- 網頁內容的定位控制
影響範圍:IE
許多情況下可以發現 IE 瀏覽器在顯示利用 float 指令來控制內容定位的網頁時,會出現和一般瀏覽器有很大差異的情況,主要的原因在於 IE 瀏覽器並不會預設內容的 position 參數為 relative。
因此在設計上,務必記得清楚定義各區塊的定位方式,就能避免這些問題發生。
|
最後更新 2009-06-08 20:32:43
網頁展示 8,407 次