MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2024-05-21, 00:35

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





發表新文章 回覆主題  [ 6 篇文章 ] 
發表人 內容
文章發表於 : 2010-09-21, 19:19 
離線

註冊時間: 2010-09-21, 19:07
文章: 2
內部 div #header 有設定 margin-top:5px; 與外部 div #main_wrapper 要空 5px, ie 結果正常, firefox 不正常.

html:

<head>

<!-- Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test1</title>

<!-- CSS -->
<!-- 畫面版面設計樣式表 -->
<link href="css/layouts/style_layout_test01.css" rel="stylesheet" media="all" />
<link href="css/texts/style_text_test01.css" rel="stylesheet" media="all" />

</head>
<body>
<div id="main_wrapper">
<div id="header">AA
</div><!-- header -->
</div><!-- main_wrapper -->
</body>
</html>

css用來定 layout:
body {
text-align:center; /* IE6 needs this to center the layout in the browser window */
}

#main_wrapper {
width:940px; /* widths of columns will change proportionately as this width is changed */
margin-left:auto; /* centers layout in browser */
margin-right:auto; /* centers layout in browser */
text-align:left; /* resets the centering hack for IE6 on the body tag */
}

css用來定 顏色:
body {
background-color:#FF0000;
margin:0px;
}

/* 主封底 */
#main_wrapper{
background-color:#FFFF00;
height:60px;

}

/* 頁首 */
#header{
background-color:#FF00FF;
height:50px;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}


附加檔案:
檔案註釋: ie 與 ff 不同.
err.JPG [84.72 KiB]
被下載 360 次
回頂端
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
 個人資料  
引用回覆  
文章發表於 : 2010-09-22, 11:46 
離線

註冊時間: 2010-09-21, 19:07
文章: 2
要內部div與外部div空行, 今天看了書, 加了position:relative; top:5px;, 刪掉 margin-top:5px;
就可以了, 請問這樣的做法 ok ? 所以內部的 div 的定位要用position:relative, 沒辦法用 margin-top:5px; ?? 謝謝.

/* 頁首 */
#header{
height:50px;
position:relative; top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}


回頂端
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
 個人資料  
引用回覆  
文章發表於 : 2010-09-22, 23:24 
簡單點的做法:在#main_wrapper設定padding(padding-bottom)


回頂端
Mozilla/5.0 (X11; U; Linux i686; zh-TW; rv:1.9.2.10) Gecko/20100915 Ubuntu/8.04 (hardy) Firefox/3.6.10
  
引用回覆  
文章發表於 : 2010-10-13, 04:00 
離線
[MozTW 版主群]
頭像

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園
我本身在排這樣的排版時,也是用樓上說的辦法,在 #main_wrapper 使用 padding
#header 本身就不用設定任何 margin 了

不過我也疑惑為何 Firefox 與 Chrome 都會把 margin-top 吃掉
所以剛才跑去查了 W3C 的網頁標準文件,發覺造成這種情形是有條件的:

#main_wrapper 必須有 border-top 或 padding-top
瀏覽器才不會把 margin-top 吃掉

_________________
在靜謐的國度裡,擁抱微風--抱風伴靜


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
 個人資料  
引用回覆  
文章發表於 : 2010-10-13, 11:05 
謝謝樓上兩位的建議, 我都試了.

1.在 main_wrapper 加入了 border-top, 是可以了, 但一要有數值不是能是 "border-top:0pt", 是0pt 效果就不對了, 但是加入這樣等於強迫了之間一定會空大於零的pt, 版面會受影響.

2.在 main_wrapper 加入了 "padding-bottom: 5px", 好像沒有效.

3.在 main_wrapper 加入了 "padding-top: 5px", 可以了, 內部的div可以正常, 但就是數值不能為零. 如果外部div與內部div不要空, 這個方法就不行了.


回頂端
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
  
引用回覆  
文章發表於 : 2010-10-13, 13:57 
離線
[MozTW 版主群]
頭像

註冊時間: 2004-11-17, 09:53
文章: 1302
來自: 臺灣桃園
訪客 寫:
謝謝樓上兩位的建議, 我都試了.

1.在 main_wrapper 加入了 border-top, 是可以了, 但一要有數值不是能是 "border-top:0pt", 是0pt 效果就不對了, 但是加入這樣等於強迫了之間一定會空大於零的pt, 版面會受影響.

2.在 main_wrapper 加入了 "padding-bottom: 5px", 好像沒有效.

3.在 main_wrapper 加入了 "padding-top: 5px", 可以了, 內部的div可以正常, 但就是數值不能為零. 如果外部div與內部div不要空, 這個方法就不行了.


抱歉沒說清楚,確實數值必須大於零才可以

然後,另一位訪客的辦法其實是可以解決你的問題的
你可以把 #header 的四個 margin 全都去掉
而在 #main_wrapper 設定四個 padding,這樣就能解決了

當然也可以只加 padding-top: 5px;,但與此同時你要記得把 margin-top: 5px; 去掉
這個辦法是用 padding 取代 margin

順帶一提,其實四邊 margin 數值一樣的時候,可以只寫成一行 margin: 5px;
padding 也可以這樣做 =)

_________________
在靜謐的國度裡,擁抱微風--抱風伴靜


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.63 Safari/534.3
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 6 篇文章 ] 

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


誰在線上

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


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

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW,Mozilla 台灣社群