使用em進行佈局會導致不同瀏覽器之間的不一致

我正嘗試使用彈性佈局來構建網站。我使用了Eric Meyer的CSS重置，並在我的樣式表中使用了body {font-size:62.5%}。使用em進行佈局會導致不同瀏覽器之間的不一致

編輯：這是我的HTML結構和CSS

<html> <head> </head> <body> <div id="container"> <div id="gallery"> </div> <div id="other"> </div> </div> <div id="footer"> </div> </body> </html>

`HTML {bacgroound：URL（）不重複頂部中央固定;}

body {font-family:Arial, Helvetica, sans-serif; 
color:#000; 
margin:auto;} 

'id'other {background-color:color1;} 

'id'footer {background-color:color2;}

正如你所看到的，如果我爲body設置了固定寬度，background對於#other和#footer保持不變。因此，我試圖通過將width設置爲100%並使用margin: 0 8em 0 8em來將圖庫和#other和#footer的內容居中。

我試圖實現的佈局基本上是一個包含圖片庫的一列布局。整個畫廊應該集中在頁面中。我使用em來定義margin，這會在不同的瀏覽器中產生不同的結果。如果圖庫集中在一個瀏覽器中，其他瀏覽器會顯示不同的結果。我試過Firefox，Chrome和IE9。

有什麼方法可以使用em作爲度量單位來生成相同的佈局？或者我應該嘗試固定佈局並使用px而不是em？

來源

2011-12-30 tayeed

這幾乎不可能完全告訴*發生了什麼，沒有參考。如果可以，請提供鏈接。 – 2011-12-30 16:10:55

保留em或percentanges。 Theydowork。

但是，將它們用於居中可能是您的問題的一部分。中心應與auto來完成，例如：

div.page { 
    margin: 0 auto; 
    width: 925px; 
}

來源

2011-12-30 15:23:15

您還需要指定元素的寬度以便正確工作。 – rahool 2011-12-30 15:50:23

@rahool好點。查看更新。 – 2011-12-30 16:08:27

你的不一致是一個事物的組合。定義body {font-size: 62.5%}告訴瀏覽器以其基本字體大小設置的62.5％顯示字體（這是用戶控制的，甚至是每種字體都可以變化）。然後，在css級聯中稍後使用em再次根據剛定義的字體大小應用縮放因子（該縮放比較難以定義：請參閱http://webdesign.about.com/od/fonts/qt/em-origins.htm）。因此，設置爲14px的瀏覽器字體將變爲8.75px（14 * .625），其在理論上可能爲17.5px（8.75 * 2）（出於說明的緣故）。如果瀏覽器有一個默認的16px字體，那麼這兩個數字將是10px和理論上20px。

所以，幫，帶不一致使用em單位，設置px值並在body標籤（標準的Web字體或也許@font-face）普遍可識別的字體，將有助於在CSS中的級聯規範em單位價值較低。

傑森麥克裏的回答是好，如果你有一個「固定寬度」的容器，但如果你想「修理邊距尺寸」，那麼你的當前設置px或em單位爲你的利潤的想法是蠻好的中心。

來源

2011-12-30 15:47:40 ScottS

+1關於變量字體的好處。但是，OP確實使用重置樣式表進行了註釋。所以你所描述的*應該*具有最小的影響。 – 2011-12-30 16:10:30

@Jason McCreary - 但是，如果重置樣式表的正文字體設置爲百分比（如OP指出的那樣），那麼它仍然是用戶（瀏覽器）依賴於初始字體大小，這可能對後來的em具有巨大的影響漿紗。 – ScottS 2011-12-30 16:15:52

使用em進行佈局會導致不同瀏覽器之間的不一致

回答

相關問題