




好的,我們要針對固定(static)元件與浮動(float)元件如何互動做個測試。根據 W3C 的規格,當浮動元件後面緊跟著固定元件時,浮動元件會以包含浮動元件的物件(在此是「body」元件)的左側作為顯示區塊的基準,固定元件也會套用相同的基準,並且與浮動元件處在相同的重直高度。
除非固定元件設定左邊界(margin)讓自己往右邊靠,而不被浮動元件擋住,否則浮動元件應該會覆蓋住固定元件。 你也可以利用 clear:left 或 clear:both 等屬性來「清除」固定元件,讓固定元件放置在浮動元件的下層。
如圖,帶有綠色邊框(border)的區塊(div#left)在「body」裡往左浮動,後面接著紫色區塊(div#static)。如果 div#static 沒有設定寬度,從大部分的瀏覽器都能顯示正常,即綠色邊框區塊疊在紫色區塊上。
但是因為 div#static 已經宣告寬度,各家瀏覽器的差異就很明顯了。Internet Explorer 會將浮動元件視為 body 左側邊界的一部份,而讓 div#static 放在 div#left 右側。Moz/N7 和 Op6 則按照規格,讓兩個區塊都固定在 body 的左側邊界上。
在製作複雜的浮動式版面時,通常需要宣告一些區塊的寬度。但如果浮動區塊後面接著固定區塊時,IE 的表現方式就跟其他遵從標準的瀏覽器不一樣。這樣的情況讓人不得不正視這個問題。(除非你是哈利波特裡法力無邊的 *那個人*)
解決這個問題有好幾種方法。其中之一是只幫 IE 寫程式,即使知道在少數瀏覽器下會爛掉。或是避免使用寬度宣告,讓許多形式的版面都變成「禁區」。
不過這種煩人的局面好像有越演越烈的趨勢。Opera7(發行於 2003 年 1 月)做了跟 IE 一樣的蠢事。 Opera7 本來該像 Opera6 一樣,讓 div#static 以檢視區(viewport)最左邊當作基準,忽略浮動元件的存在。結果 Opera7 卻把 div#static 並列於浮動元件旁邊。
就我個人看來,這代表 Opera 的決策者決定認輸,與其固守標準規格,不如選擇「好走的路」。微軟確實很有影響力,顯然地浮動元件的標準快行不通了。我想所謂的標準規格,大概只要比爾蓋茲點頭說是的就是了。
好吧,我假設這已經是最好的情況。只有一個笨透了的私定標準總比兩個根本無法公平競爭的標準來得好。作瀏覽器的人真該多喝點蠻牛(譯註:原文是用 bulldog,這是一種提神飲料品牌)。不過老兄們幫幫忙,做瀏覽器的時候不要連 IE 那堆意外產生的臭蟲都模仿好嗎? ;-/
我沒有潔癖,能夠跟微軟設計的規格相處愉快。但是當微軟公開支持某些規格,然後又暗地裡嘲弄它們,這就讓我無法忍受。這樣子會有什麼未來?
這些問題在過去已經被一講再講。親愛的讀者,如果你有任何可以跟微軟高層聯絡的管道,拜託你看看能不能探到一些小道消息。我已經開始擔心 CSS 這玩意兒的規格並不像它所說的簡潔俐落,因為大部分的瀏覽器拒絕以正確的方式讀取它。這種僵局總是要解決的;那為我們為什麼不現在就把它做掉呢?
Big John
e-mail
©positioniseverything
最後修改日期: January 28, 2003
Created January 28, 2003
中文翻譯:
acer
