作者GALINE (我是CQD,不是cqd)
看板Web_Design
標題Re: [請益] CSS三欄式在IE和FireFox的排版問題
時間Sat Aug 2 00:53:01 2008
※ 引述《circus29 (I'll Show You)》之銘言:
: http://arrby.blogsite.org/1.htm
: http://arrby.blogsite.org/1_files/css.txt
: 現在遇到幾個問題
: 1.我在FireFox裡面無法把所有區塊至中
你似乎是用text-align:center置中。然而text-align:center會讓div置中這點是IE自創
的規格(或者是Bug)。
其他瀏覽器裡面,常用的方法是用一個div把全部的內容包起來,然後設定上下margin為
0,左右margin為auto。例如:
<html><head></head>
<body><div id="wrapper">網頁內容</div>
</html>
#wrapper{margin: 0 auto 0 auto;}
但是IE6在Quirks模式會忽略這個設定
故text-align跟margin auto兩種作法都要上 ˋ(′_‵||)ˊ
body{text-align:center;}
#wrapper{margin: 0 auto 0 auto; text-align:left;}
: 2.最下面的footer區塊在FireFox裡面位置會固定蓋在別的區塊上面
一扯到float問題就多了,也有點懶得追查[汗]
不過你指定了boxC的高度為120px,所以firefox認為boxC不管理面的子元素塞了多少
東西,都該把他當作120px高。下面的footer就往上縮到對應的位置了
IE則不管這個。子元素裡面的東西會把boxC撐開。
我不確定哪種作法是對的。印象中IE的作法不合標準,雖然比較直覺。
所以你要做的事情有兩個:
1.把boxC的height拿掉。我很好奇為什麼這邊會被設定高度 XD
2.為footer的css加上「clear:both;」,確保footer會繪製在left跟right這兩個
有float的元素之後。不然你會看到footer被right擠成一團…
另外,div#main你也設定了高度,如果沒有特殊理由建議拔掉。
: 3.每個區塊的大小好像設定在FireFox裡面都很不像IE那樣整齊
: (我印象中是區塊的定義兩個瀏覽器不一致??)
對同一個DIV同時設定width跟padding的話,IE6計算出來的寬度會其他家瀏覽器不同
照標準來說,padding不算在width裡面。可是IE會把padding算進width。
因此這段CSS:
#right .boxC{width:100%; height:120px; padding:12px; /*下略*/}
IE6在Quirks模式中會把方塊的寬度視為 100% * 590px = 590px
(590px是你設定的boxC母元素,box的寬度)
但是在其他瀏覽器中則被解釋成 100% * 590px + 12px + 12px = 614px
(兩個12px分別是方塊左側的padding跟右側的padding)
所以內側元素的寬度超過外側元素,就凸出來了
解決方法,不要對同一個元素同時指定padding跟width。
如果沒有必要就不要加width=100%。
這樣你提出的問題就解決了。不過還是有些奇怪的地方
像是為什麼div.boxC裡面還要多包一個div#Prod之類的…
以初學來說你的腳程還滿快的。然後我懶的仔細看了,我要睡了 :P
-
補充,經過測試IE6如果加上Doctype他進入標準遵循模式,第一點跟第三點的問題都會消
失第二點我沒測。估計也是一樣的狀況。如果不加的話IE6會用IE5相容的Quirks模式繪製
畫面。而IE5對CSS解讀之糟糕就會造成以上這些鬼現象…
這大概是IE6放不下的舊包袱吧
目前看起來,加Doctype讓IE進入Standards模式,並且確保內容符合標準是讓網頁在IE跟
其他瀏覽器中版型相同的最好解法。比較討厭的是應該選定哪一種標準的Doctype來用…
面對相對比較舊或需要考量向下相容性的標準,瀏覽器可能會進入Quirk模式
例如IE8會用IE5相容的Quirks模式繪製XHTML 1.0 transitional
因此我會建議往XHTML 1.0 strict或XHTML 1.1走,這樣應該大多數的瀏覽器都會用最
嚴格的標準模式來繪製畫面。
對不起,我是不喜歡用Doctype的壞小孩 (o一-一)=○# ( ̄#)3 ̄)
因為我自己曾經碰過加了Doctype之後IE6跟IE7顯示內容會不同的狀況。把Doctype拔掉
之後一切正常。之後我就再也不用Doctype了…
但現在看起來,加上Doctype似乎利大於弊…應該吧 XD
--
不可以!那是黑鷹族的精神象徵!
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.62.112.152
※ 編輯: GALINE 來自: 61.62.112.152 (08/02 00:59)
推 carlcarl:那用!important行不行@@? 08/02 10:59
→ chph:並不正確, IE6是可以解讀 margin: 0 auto; 的 08/02 11:37
→ GALINE:唔…原來是IE6的Quirks模式太Quirks的關係…Orz 08/02 13:10
※ 編輯: GALINE 來自: 61.62.112.152 (08/02 13:30)