Question

我正在尝试使用弹性布局构建网站。我使用了Eric Meyer的CSS重置，并在样式表中使用了body {font-size:62.5%}。

编辑：这是我的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（）no-repeat top center fixed;}

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

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

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

`

如您所见，如果我为body设置固定宽度，background和#other的{{1}}仍然是固定的。因此，我尝试通过将#footer设置为width并使用100%将图库和margin: 0 8em 0 8em以及#other的内容置于中心来解决问题。

我想要实现的布局基本上是包含图片库的单列布局。整个图库应该在页面中居中。我使用#footer来定义em，这会在不同的浏览器中导致不同的结果。如果图库位于一个浏览器的中心，则其他浏览器会显示不同的结果。我试过Firefox，Chrome和IE9。

使用margin作为计量单位，是否有办法生成相同的布局？或者我应该尝试使用固定布局并使用em代替px？

Answer 1

保持em或百分比。 They 执行 work。

但是，使用它们进行居中可能是您的问题的一部分。应使用auto进行居中，例如：

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

Answer 2

你的不一致是各种各样的事情。定义你的body {font-size: 62.5%}告诉浏览器以62.5％的基本字体大小设置显示字体（这是用户控制的，甚至是每个字体的变量）。然后，在css级联中稍后使用em再次应用基于刚刚定义的字体大小的缩放因子（缩放更难定义：请参阅http://webdesign.about.com/od/fonts/qt/em-origins.htm）。因此，设置为14px的浏览器字体将变为8.75px（14 * .625），在2em处（为了便于说明）理论上可能是17.5px（8.75 * 2）。如果浏览器具有默认的16px字体，则这两个数字将为10px，理论上为20px。

因此，为了帮助解决使用em单位的不一致问题，请在px标记上设置body值和普遍可识别的字体（标准网络字体或{{1} }}）有助于标准化css级联中较低的@font-face单位值。

Jason McCreary的答案很好，如果你有一个“固定宽度”的容器，但如果你想“修复边距大小”那么你当前想要为你设置em或px单位保证金适合居中。

使用em进行布局会导致不同浏览器之间的不一致

2 个答案: