看板 Web_Design 關於我們 聯絡資訊
※ 引述《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)