首頁 »
April 8, 2006

[網] sina 部落網技 - 純文字文章、不一致的樣式

“......各家、各個版本的瀏覽器在支援 CSS level 2 上都缺東缺西的, 尤其是 IE 6 更有約 30% 的不支援比例, CSS 2.1 就是為了順應多年來的實況而 downgrade 的一個規格。即使在 CSS level 1 的支援性上, 各個瀏覽器亦有各自在處理上的 bugs, 也因此才出現了很多所謂的 "CSS hacks" 編寫技巧, 以便克服各版本的瀏覽器在呈現樣式上的 bugs 與諸多不一致的現象──即異廠牌瀏覽器因版面 rendering 邏輯有異所導致的 CSS 相容性問題, 自上個世紀末幾年 CSS 規格推出以來這個讓許多 web designer 困擾的情況始終存在。......”

在一般 HTML 網頁上, 即使有明白指定使用等寬中文字型(如
細明體), 但於部分不同的字體尺寸, 仍有可能受到瀏覽器版
本/作業系統顯示子系統的計算方式、或者字型檔裏對字元間
距的設定有異等因素所影響, 而使得英文字不會正好以所對應
中文字尺寸的半寬字距來顯示, 即便使用 preformat 或 type-
writer text (TT) 等碼亦有此擾。
 
因此, 在轉貼 BBS 等處的純文字文章或程式碼於網頁後, 若
文章顯示中出現行句不對齊、表格框線等沒有對準的現象, 除
了逼不得已將瀏覽器選項的 Web 網頁繁體字型設定成「細明
體」等非比例(非調和間距)中文字型以外, 最好還是依下文所
示修改相關修飾 tag, 以便確保英文及空白字元亦能以所指定
的等寬字體規格(指 monospaced or fixed-width font)來正
確顯示。
 
在 Windows 系統上, 較小號的細明體於顯示時並非直接使用字
型檔中的 TrueType 向量字模(glyph), 而是取用點陣字模來加
速並改善顯示時的品質, 故較小的字體(10pt 及以下)反而比較
不會發生前述現象。一個變通的方式是:可以在文章前頭插入
inline CSS style 碼, 即能 override 掉 CSS 檔中的同個屬
性值;如使用下述的碼, 就可讓內文的中、英文字都以能對齊
的固定間距來顯示("monospace" 屬通用字體):
 
 <span style="font-family: 細明體, monospace; font-size: 16px">這句話
 屬於內文(content)。</span>
 
適用的字體尺寸仍得視軟體(作業系統與瀏覽器)實作上遇到中
、英文(或全、半形)夾雜時, 是否有考慮到字元間距的協調而
定。譬如, 不能以二來整除的 15px 字體尺寸在某些 Linux
平台下所顯示半型字會偏小而不能與全形字對齊, 可整除的
16px 則可讓全、半形齊一字距。若把文章內 ASCII art 圖表
裏的一些半形字元/空格給替換成全形字, 亦可收版面齊一改
善的效果。
 
另一種情況, 則得考量到瀏覽器的性能。各家、各個版本的瀏
覽器在支援 CSS level 2 上都缺東缺西的, 尤其是 IE 6 更
有約 30% 的不支援比例, CSS 2.1 就是為了順應多年來的實
況而 downgrade 的一個規格。即使在 CSS level 1 的支援性
上, 各個瀏覽器亦有各自在處理上的 bugs, 也因此才出現了
很多所謂的 "CSS hacks" 編寫技巧, 以便克服各版本的瀏覽
器在呈現樣式上的 bugs 與諸多不一致的現象──即異廠牌瀏
覽器因版面 rendering 邏輯有異所導致的 CSS 相容性問題,
自上個世紀末幾年 CSS 規格推出以來這個讓許多 web designer
困擾的情況始終存在。
 
就最多使用者的 IE 5/6 而論, 即在常用的 width 屬性上易
產生誤判以致於在頁面顯示上出現「破版」的情況, 儘量使用
fixed width 可減少發生的機率。至於會發生破版或掉版的緣
由, 最常見因素為各瀏覽器在非標準模式(即 quirks mode)下
對於 box model 的定義有異所引起。於此借用 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 時, 其將區塊所指定的
width 值視為 "box width", 所以 margin 等屬性所設定的邊
框補白數值已包含於 width 之內。而在其他諸如 Netscape/
Gecko 系(如 Mozilla Firefox)及 WebKit 系(如 Safari、
Chrome)瀏覽器裏, 卻是將此 width 只當作 "element width"
來看待, margin 等數值是排在 width 值之外的。這個不一致
使得我們在配置版面時須同時將兩種情況的 width 誤差給預
估在內, 不然即易發生「破版」。
 
舊版 IE 還時時誤將前一個網站所套用的 CSS 設定給「繼承
」用到下一個網站上;因此若發生於不同時間查閱某網頁(無
論其有無套用 CSS)時出現前後格式上不該有的異常變化時,
最簡單的方法是將 IE 關掉再重開此網頁, 即可暫時迴避掉這
個問題。例如, 您若先讀取其他 blog 後接著即讀取本板文章
, 可能就會發生上述那種純文字表格框線等沒有對準、甚至破
版的情形──此即因前一個blog 的某些 CSS 字型屬性值被瀏
覽器誤套用到本板來了。



[網] sina 部落網技 - 訊息內的 HTML 碼←上一篇 │首頁│ 下一篇→[網] 部落格文化的去中心化概念
本文引用網址: