Change History
Message: 跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
Changed By: HP
Change Date: September 27, 2011 05:41AM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 27, 2011 05:41AM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
1. IE6 對寬度（width）的定義不一樣（事實上把 width 當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
1. IE6 對寬度（width）的定義不一樣（事實上把 width 當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 03:13PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 23, 2011 03:13PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
1. IE6 對寬度（width）的定義不一樣（事實上把 width 當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
1. IE6 對寬度（width）的定義不一樣（事實上把 width 當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 03:10PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 23, 2011 03:10PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE7 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE7 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 02:55PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 23, 2011 02:55PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13）
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
2. IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 02:46PM
Change Date: September 23, 2011 02:46PM
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>IE6 眼中的系友會百科
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
ight:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
om/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>IE6 眼中的系友會百科
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘的空隙。（此空隙由當下區塊所繼承的 background-color 填滿）
IE7
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
ight:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
om/forum/file.php?844,file=150,filename=IE7-_.jpg" width=700 />
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 02:35PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（以暨大外文系友會百科設計初版為例）IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 23, 2011 02:35PM
跨瀏覽器 Box Model 實例觀察：table、p、backgroud 與 margin（以暨大外文系友會百科設計初版為例）IE6、IE7、IE8、Firefox6、Chrome13）
觀察網頁：<a href=http://mepopedia.com/?page=830>暨大外文系友會 - 生涯經驗分享</a>
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>IE6 眼中的系友會百科
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-簡要觀察：頁面左側有多餘的空隙。_.gif" width=700 />
簡要觀察：頁面右側有多餘的空<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
觀察時間：2011年9月23日
觀察瀏覽器：IE6、IE7、IE8、Firefox6、Chrome13
<hr/>IE6 眼中的系友會百科
<hr/>1. IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-簡要觀察：頁面左側有多餘的空隙。_.gif" width=700 />
簡要觀察：頁面右側有多餘的空<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<div style="position:relative"><div style="width:25px;height:55px;left:550px;top:215px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=152,filename=IE7-_.gif" width=700 />
簡要觀察：頁面右側有多餘空隙的問題沒有了，但出現表格（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6 眼中的系友會百科（此結果和 IE8、Chrome 類似）
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />
簡要觀察：
1. table 與主文區塊（#wikitext）相衝突。（不是 table 太寬就是 #wikitext 太窄）
2. footer（上方）部份有多餘空隙。
<b>HTML 佈局簡要示意</b>
<xmp><body>
<div id="building">
...
<div id="content_list">
...
<div id="wikitext">
...
<table>...</table>
<div>
<p><br/></p>
</div>
<div id="footer">...</d1. IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
W3C 官方定義 <p> 的上下會有預設「一個字體大小 font-size」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Changed By: HP
Change Date: September 23, 2011 01:18AM
Change Date: September 23, 2011 01:18AM
Changed By: HP
Change Date: September 23, 2011 12:08AM
Box Model 的應用：以暨大外文系友會百科設計初版為例）IE6、IE7、IE8、Firefox6、Chrome13）
Change Date: September 23, 2011 12:08AM
Box Model 的應用：以暨大外文系友會百科設計初版為例）IE6、IE7、IE8、Firefox6、Chrome13）
<img src=""/>
<img src=""/>IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
Firefox6 眼中的系友會百科
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6e」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
<img src=""/>IE6 眼中的系友會百科
<div style="position:relative"><div style="width:30px;height:430px;left:575px;top:70px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=147,filename=IE6-_.gif" width=700 />
Firefox6 眼中的系友會百科
<div style="position:relative"><div style="width:25px;height:55px;left:545px;top:265px;border: red solid 2px;position:absolute"></div><div style="width:510px;height:25px;left:90px;top:455px;border: red solid 2px;position:absolute"></div></div>
<img src="http://mepopedia.com/forum/file.php?844,file=148,filename=Firefox6-_.gif" width=700 />（table）寬度超過主文區塊（#wikitext）的問題。
<hr/>Firefox6 眼中的系友會百科
<hr/>Firefox6e」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
<div>
<p><br/></p>（造成頁尾有灰色空隙的段落標籤）
</div>
<div id="footer">...</div>
</div>
</body></xmp>
<b>分析大網：</b>
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。
<b>3. background 和你想的不一樣：background 不包括 margin</b>
Firefox 中 footer 上方的灰色空隙就是 <p> 的 margin 所造成的空隙，而這個空隙不歸 <p> 的 background 管，所以就變成是最外面的 body 管。變成是由 body 的背景顏色來決定。
Original Message
作者: HPDate: September 22, 2011 11:54PM
Box Model 的應用：以暨大外文系友會百科設計初版為例）IE6、IE7、IE8、Firefox6、Chrome13）
Firefox6 眼中的系友會百科
Firefox6e」的 margin，但 IE6~IE8 不會有預設 margin。
當作 min-width）
IE6 區塊（Box）若遇子區塊比自已寬，會自動變寬，不會按照 CSS 設定。也就是說，IE6 把「寬度」看作「最小寬度」，若有需要會自動延伸加大。（而實際上 IE6 對真正的 CSS 語法min-width 卻又不支援）
2. 標籤 <p> 的定義：IE6 和「其他」不一樣
表格）
...