首頁 »
February 3, 2008

[網] sina 部落網技 - CSS 版面的 width、float、monospace 相容性問題

“......這樣的精確寬度所設計的 CSS 網頁, 在 Firefox 之下就會發生寬度不足的毛病了, 通常即會產生掉版的現象;反之, 若以 Firefox 為基準, 則需以各區塊視為 element width 另加邊框補白的計算方式來定義整體 width 才正確, 但在大多數人使用的 IE 裏所呈現的版面又會產生多餘的空白(如在左、右區塊欄位間的間隔), 版面失去了精確性。本板過去所發生的掉版問題, 即導因於前者以 IE 為準的情況。至於在整體(#area)及內文區(#content)都定義成自動指定寬度(auto or 100% width)的版面, 只要顯示器的畫面夠寬, 也就不用慮及計算上的問題;不過, 在越來越大的寬螢幕上, 你會想看到(未來)一行將寬達有八十個中文字的文章嗎 :) ?......”

話說, 敝人很早就注意到(也曾有網友提醒過)位於「新浪部落」的本板在固定版面格式後, 只能在 IE 裏正常顯示, 而在 Mozilla 系(如 Firefox)的瀏覽器裏, 內文區(#content)卻會落到邊欄區(#navalpha)之下, 標頭區(#banner)也不能正常定位。以前雖然就想要調整所使用的 CSS 樣式表, 不想一拖就拖了年餘了(由此可見我不太關心這裏? :p)。
 
會發生掉版的緣由, 是因為不同網頁瀏覽器的版面 rendering 邏輯有異所導致的 CSS 相容性問題, 自上個世紀末幾年 CSS 規格推出以來這個讓許多 web designer 困擾的情況始終存在。在此先借用 Cascading Style Sheets, level 1 (REC-CSS1-19990111) 規格建議書裏的 '4  Formatting model' 一章的圖解來說明:
 
     _______________________________________
    |                    |
    |      margin (transparent)    |
    |  _________________________________  |
    | |                 | |
    | |    border          | |
    | |  ___________________________  | |
    | | |              | | |
    | | |   padding        | | |
    | | |  _____________________  | | |
    | | | |           | | | |
    | | | | content      | | | |
    | | | |_____________________| | | |
    | | |___________________________| | |
    | |_________________________________| |
    |_______________________________________|
    
         |  element width  |
    |        box width        |
 
該圖簡單說明了在使用 CSS 樣式表所定義的方塊(box)區域裏, margin、border、padding 等邊框補白與 element/box width 之間的配置關係。
 
MS IE 在處理 CSS 時, 其將 #content 等區塊所指定的 width 視為 "box width", 所以 margin 等屬性所指定的邊框補白數值已包含於 width 之內。而在其他諸如 Netscape、Mozilla、Firefox、Opera、Safari 等瀏覽器裏, 卻是將此 width 當作 "element width" 來看待, margin 等數值是排在 width 值之外的。
 
因此, 若把一個網頁版面的下層整體寬度(#area)定義為固定值(fixed width, 如本板的例子)、且沒預留一些餘裕空間的話, 則在 IE 環境下以:
 
  「上層各個區塊 box width 的加總等於下層整體 width」
 
     #content  +  #nav*  =   #area   (不考慮 #area 的邊框補白)
 
這樣的精確寬度所設計的 CSS 網頁, 在 Firefox 之下就會發生寬度不足的毛病了, 通常即會產生掉版的現象;反之, 若以 Firefox 為基準, 則需以各區塊視為 element width 另加邊框補白的計算方式來定義整體 width 才正確, 但在大多數人使用的 IE 裏所呈現的版面又會產生多餘的空白(如在左、右區塊欄位間的間隔), 版面失去了精確性。本板過去所發生的掉版問題, 即導因於前者以 IE 為準的情況。至於在整體(#area)及內文區(#content)都定義成自動指定寬度(auto or 100% width)的版面, 只要顯示器的畫面夠寬, 也就不用慮及計算上的問題;不過, 在越來越大的寬螢幕上, 你會想看到(未來)一行將寬達有八十個中文字的文章嗎 :) ?人體工學的閱讀舒適度研究顯示, 眼球在上下運動時, 眼肌所費的勁是比左右運動輕鬆的, 現在流行的「寬」對閱讀來說不見得一定就好。
 
今日就以保留餘裕像素點數的方式, 以便讓本板在 IE、Mozilla 系等瀏覽器皆可正常顯示文章。目前的計算方式, 仍以 IE 為版面精確化的基準, 而使用其他瀏覽器時於欄位間的間隔只會多出 3px 的微小空間。另一個差別是, 在 IE 下的內文區單行可顯示 41(.5) 個中文全形字, 其他瀏覽器下則可容納 42 個全形字, 都足以完整呈現 BBS 上的文章了。
 
另外, 本板的標頭區(#banner)內的各個元素在 IE 除外的瀏覽器無法如預期定位, 也是由於僅有 IE 才支援 "float:center;" 此一非 CSS1 標準屬性值、且其預設的 "float:none;" 實際上等同 "float:center;" 的關係所導致的, 乃改以標準化的 "float:left;" 配合 margin 留空的方式來暫時解決, 但仍存在區塊於左右定位上不一致的問題(Mozilla's margin x 2 = IE's real margin)。
 
關於 CSS 網頁在一些 IE 版本、或者非正體中文版 Windows 平台(參下文 3))裏常無法妥善把固定間距(等寬)中文字型(monospaced or fixed-width font)給準確排齊(monospacing or fixed-pitch spacing)的毛病, 於顯示 BBS 文章時特別嚴重, 由於是屬於軟體本身的問題, 現階段我能做的, 就只有把文章內的 ASCII art 圖表裏的一些半形字元/空格給替換成全形字來處理。而這得一篇一篇來修改, Firefox 反而沒這個困處──又是一個無奈的難以兩全!就留待哪天有閒情時再慢慢去對付了。(希望不會和掉版問題一樣, 一拖又……)
 
順此, 並介紹一個 Open Source 的網頁版面檢視服務:
 
  Test your web design in different browsers - Browsershots
 
這個網站透過實體與 VMware 虛擬機器的環境提供預覽 Ubuntu Linux、Windows 2000/XP 及 Mac OS X 三大作業系統之下、數十個瀏覽器程式/版本所 render 出的特定網址頁面的外觀, 在了解 CSS 版面呈現、作業平台的差異性等問題上殊為便利, 只是要等候一段處理時間才可以下載所指定的全部畫面。若在 30 分鐘的預設等候時間將到期前各個畫面還未上傳完畢, 可按 [Extend] 延時鈕以避免 expiration。依我初步的試用, 此網站在處理中文網頁上有幾個限制:

1) 有些 VMware 下的虛擬機器 image 缺少相關的 language pack, 其環境組合無法正確辨認出語系的編碼種類或字型而變成亂碼。
 
2) 遇到捉網頁內嵌或外連資料發生延遲(lag)時, 可能會導致所截取下來的瀏覽畫面不完整, 甚至一片空白。
 
3) 其 Windows 平台只具有最基本的通用中文字型(宋体?), 並且似乎沒安裝或無法辨認出華康「(新)細明體」(正體中文版 Windows 預設字型), 所以若有指定使用特定字型(如細明體、標楷體)或 ASCII art 圖表字元時將出現一些失真、未排齊的現象。Ubuntu Linux 除了有這個字型的問題外, 有時候還會讓頁面裏所有的字都變小一點, 更不足作準了(有些 Linux 使用者因此會手動把 Windows 的(新)細明體字型檔轉用過去)。
 
4) 其所運行的 Mac 機器在字型平滑化(anti-aliasing)的能力明顯高出於其他平台(尤其是小字號字體), 所以呈像的字型品質好很多, 而與一般 Windows PC 所見者有所差別, 但猶有第 3) 點所說的現象。
雖有上述幾點需留意之處, Browsershots 仍不失為一個極方便的版面預覽檢查工具。當然, 在自己的純正體中文(作業系統)電腦上安裝所要測試的瀏覽器程式是最為準確的了。
 
在經過簡單的調整後, 若這個部落格仍發生掉版的情形、或者訪客對於哪一篇文章圖表未排齊的現象覺得有所礙目的話, 請不吝回應指示一聲。
 
 
cf. Cascading Style Sheets, level 1 (REC-CSS1-19990111)/W3C
  本板現用的 CSS 樣式表檔案:styles-site.css
  本板於 CSS 調整前、後的預覽圖組:Website overview - Browsershots
  敝文〈[網] sina 部落網技 - 純文字文章、不一致的樣式字型尺寸採用 pt 或 px?



§S.O.S. 第十三講 -- 資本主義對中國的侵略 --←上一篇 │首頁│ 下一篇→在慈濟光環下的隱微黯影
本文引用網址: