MozTW 討論區 https://forum.moztw.org/ |
|
請問 Firefox 使用 css - div 會出現 scroll bar 的問題 https://forum.moztw.org/viewtopic.php?f=13&t=14015 |
第 1 頁 (共 1 頁) |
發表人: | samgw [ 2006-05-05, 17:28 ] |
文章主題 : | 請問 Firefox 使用 css - div 會出現 scroll bar 的問題 |
小弟想請問一個問題, 為什麼下面的 HTML 會在 Firefox 中產生 vertical scroll bar ? 而當我在 <div>..</div> 的區塊前面加上任何一字元, vertical scroll bar 就會消失. 這個地方實在很奇怪,希望大家能夠幫我解惑一下,謝謝! ![]() 代碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <style type="text/css"> <!-- html { height:100%; /* border : thick solid red;*/ } body { margin: 0; padding: 0; height: 100%; width: 100%; text-align:center; /* border : thick solid #000000;*/ } .container{ margin-top:15px; } --> </style> <title></title> </head> <body> <div class="container"> I am in div </div> </body> </html> |
發表人: | danielwang [ 2006-05-05, 21:56 ] |
文章主題 : | |
隨便猜的,把 100% 的東西都拿掉看看 |
發表人: | 李某人 [ 2006-05-06, 19:50 ] |
文章主題 : | |
沒測試過, 我純粹說說而已... 首先你這段 CSS 讓 BODY 的 height 變得跟 HTML 一樣了... 然後 BODY 裡面的 div.container 又有 15px 的 top margin... 這時 div 的 top margin 會 collapse 掉, 變成了 body 的 top margin (粗略說)... 這樣 body 在垂直面上所佔的空間 (100% + 15px) 會大於 html 的 (100%), 所以會出現 scrollbar... 但如果你在 div 前加入什麼的話, body 的 top edge 跟 div.container 的 top margin edge 接觸不到, 不會出現 margin collapsing 的現象, html 的空間夠 body 用就不會出現 scrollbar 了... |
發表人: | samgw [ 2006-05-08, 14:34 ] |
文章主題 : | |
感謝李某人與danielwang, 點出關鍵點出來,小弟查了一下, 的確很有可能是因為 collapsing vertical margins 的關係。 ![]() 長知識,長知識 |
發表人: | 訪客 [ 2006-07-21, 16:35 ] |
文章主題 : | |
samgw 寫: 小弟想請問一個問題,
為什麼下面的 HTML 會在 Firefox 中產生 vertical scroll bar ? 而當我在 <div>..</div> 的區塊前面加上任何一字元, vertical scroll bar 就會消失. 這個地方實在很奇怪,希望大家能夠幫我解惑一下,謝謝! ![]() 代碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> <!-- html { height:100%; /* border : thick solid red;*/ } body { margin: 0; padding: 0; height: 100%; width: 100%; text-align:center; /* border : thick solid #000000;*/ } .container{ margin-top:15px; } --> </style> <title></title> </head> <body> <div class="container"> I am in div </div> </body> </html> |
第 1 頁 (共 1 頁) | 所有顯示的時間為 UTC + 8 小時 |
Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |