MozTW 討論區 • 檢視主題 - 請問 Firefox 使用 css

所有顯示的時間為 UTC + 8 小時

請問 Firefox 使用 css - div 會出現 scroll bar 的問題

第 1 頁 (共 1 頁)

[ 5 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

samgw

文章主題 : 請問 Firefox 使用 css - div 會出現 scroll bar 的問題

發表於 : 2006-05-05, 17:28

註冊時間: 2004-12-03, 13:43
文章: 8
來自: Taiwan

小弟想請問一個問題，

為什麼下面的 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>

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

danielwang

文章主題 :

發表於 : 2006-05-05, 21:56

[MozTW 版主群]

註冊時間: 2003-09-15, 03:47
文章: 1016
來自: Taiwan

隨便猜的，把 100% 的東西都拿掉看看

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

李某人

文章主題 :

發表於 : 2006-05-06, 19:50

註冊時間: 2005-01-16, 13:34
文章: 131

沒測試過, 我純粹說說而已...

首先你這段 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 了...

_________________
Notes redesigned.
--
Opera 9.5 just tastes good. ;-)

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

samgw

文章主題 :

發表於 : 2006-05-08, 14:34

註冊時間: 2004-12-03, 13:43
文章: 8
來自: Taiwan

感謝李某人與danielwang，
點出關鍵點出來，小弟查了一下，
的確很有可能是因為 collapsing vertical margins 的關係。

長知識，長知識

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

訪客

文章主題 :

發表於 : 2006-07-21, 16:35

samgw 寫:

代碼:

<!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>

回頂端

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.1.4322)

第 1 頁 (共 1 頁)

[ 5 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 7 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :