Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

跨瀏覽器 Box Model 實例觀察:table、p、backgroud 與 margin(觀察瀏覽器:IE6、IE7、IE8、Firefox6、Chrome13)

觀察網頁:暨大外文系友會 - 生涯經驗分享
觀察時間:2011年9月23日
觀察瀏覽器:IE6、IE7、IE8、Firefox6、Chrome13


1. IE6 眼中的系友會百科



簡要觀察:頁面右側有多餘的空隙。(此空隙由當下區塊所繼承的 background-color 填滿)

2. IE7



簡要觀察:頁面右側有多餘空隙的問題沒有了,但出現表格(table)寬度超過主文區塊(#wikitext)的問題。


Firefox6 眼中的系友會百科(此結果和 IE8、Chrome 類似)



簡要觀察:
1. table 與主文區塊(#wikitext)相衝突。(不是 table 太寬就是 #wikitext 太窄)
2. footer(上方)部份有多餘空隙。

HTML 佈局簡要示意
<body> <div id="building"> ... <div id="content_list"> ... <div id="wikitext"> ... <table>...</table>(寬度過大的表格) <div> <p><br/></p>(造成頁尾有灰色空隙的段落標籤) </div> <div id="footer">...</div> </div> </body>
分析大網:
1. IE6 對寬度(width)的定義不一樣(事實上把 width 當作 min-width)
IE6 區塊(Box)若遇子區塊比自已寬,會自動變寬,不會按照 CSS 設定。也就是說,IE6 把「寬度」看作「最小寬度」,若有需要會自動延伸加大。(而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援)

2. 標籤 <p> 的定義:IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin,但 IE6~IE7 不會有預設 margin。

3. background 和你想的不一樣:background 不包括 margin
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙,而這個空隙不歸 <p> 的 background 管,所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。



Edited 8 time(s). Last edit at 09/27/2011 05:41AM by HP.
(編輯記錄)

Attachments:
開啟 | 下載 - IE6-暨大外文系友會百科初版.gif (61.6 KB)
開啟 | 下載 - Firefox6-暨大外文系友會百科初版.gif (55.8 KB)
開啟 | 下載 - IE8-暨大外文系友會百科初版.jpg (183 KB)
開啟 | 下載 - IE7-暨大外文系友會百科初版.gif (42.8 KB)
開啟 | 下載 - Chrome13-暨大外文系友會百科初版.gif (43.1 KB)
觀察要點2:

W3C 官方定義,段落 <p> 的前後會有預設「一個字體大小(font-size)= 1em」的 margin,但在實例觀察中, IE6 和 IE7 沒有這個預設 margin。

若習慣於 IE6/IE7 的設計,沒有考慮到官方定義的預設段落 margin,就會出現下圖中頁尾部份的多餘空隙(紅框中的灰色部份)。在紅框中是以段落 <p> 所構成的一個空白行,因為預設的上下邊距,所以整個段落(紅框部份)有三行行高。但依 CSS Box Model 的官方定義,段落(任何元素)的背景(background)不包括邊距,所以淡藍色(#FAFAFA)的背景顏色無法出現在下邊距(margin-bottom),形成三不管地帶。最後這個三不管地帶由於沒有元素管轄,所以就繼承了 <body> 的背景顏色(#E3E3E3)。

預設段落邊距(margin)的圖示(以 Firefox6 為例):

<p> ... </p>




Edited 2 time(s). Last edit at 09/27/2011 05:24AM by HP.
(編輯記錄)