2/28/2007

框格模型技法

這技法起源於IE5/5.5與IE6對css區塊寬度的解譯不同, 目前的IE6, Netscape和Firefox對區塊寬度有相同的解譯模式稱為"標準模式"(standard model).

如果不考慮IE5/5.5的話, 是可以不必理會這種差異, 但是拜Microsoft之賜, 當IE6在Doctype上方加上任何宣告或字眼時, IE6對區塊寬度解譯就會變成IE5/5.5的"相容模式"(quirks model).

這就是為什麼網頁套上程式後, 區塊寬度經常會跑掉的原因, 因為工程師在Doctype上方加上
<?xml version="1.0" encoding="big5" ?>

IE5/5.5與IE6對區塊寬度的解譯到底有什麼不同?

舉一個200px寬度加上10px間距和1px框線的區塊為例:
width="200px", padding="10px", border="1px"

IE6, Netscape和Firefox會對這區塊顯示出 200+10*2(左右間距)+1*2(左右框線)共222px的區塊寬度 --> 間距與框線寬度外加
IE5/5.5則會對這區塊顯示出padding+border共200px的區塊寬度 --> 間距與框線寬度內含

所以當IE6在Doctype上方加上xml宣告或任何字眼的區塊寬度會比原設定少(從"標準模式"變成"相容模式")

如果不在Dectype上方加宣告, 程式仍然可以正常運作, xml宣告也可以寫在<head>裡面.

"框格模型技法"是顧全新舊版IE, Netscape和Firefox的技巧, 雖然在css寬度設定時會比較麻煩, 但是如果要製作各版broswer都相同的網頁就要熟悉這項技法 .

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc;}
#box { width: 250px; voice-family: "\"}\""; voice-family: inherit; width: 200px;}
html > body #box { width: 200px;}


#box將寬度寫進另一個同名id,
第一行寬度250px是寫給IE5/5.5看的(所以寬度較大).
第二行寬度200px是寫給IE6看的, 因為IE5/5.5讀到 voice-family: voice-family: "\"}\""; voice-family: inherit; 後就不再往下看, 而IE6會以第二個寬度為準

html > body #box 是寫給Netscape和Firefox看的, 因為IE5/5.5/6不支援這種css寫法
(但是IE7已經支援這種寫法, 如果要再專寫一組給IE7看的可以用*+html > body #box)

在Doctype上面加上xml宣告的網站做法還可以再簡化, 所以在設計網頁時就先加好這行宣告, 讓broswer直接以IE5/5.5模式反應寬度.

#box { padding: 20px; border: 5px solid #666666; background-color: #cccccc; width: 250px;}
html > body #box { width: 200px;}


以上是不以IE6的版本做考慮, 因為IE6已經不存在, 就算user的broswer是IE6也會變成以相容模式呈現, 但是html > body #box還是要加上, 用來解決Netscape和Firefox的寬度問題.

1 則留言:

壞掉的印表機 提到...

阿姐~前陣子我有整理一份CSS HACK,可以在一個class中寫完個版本IE跟FF的做法給你參考看看,看是否工作上有幫助--超簡單 IE8 CSS hack + 所有瀏覽器一次解決