我正在尝试使用弹性布局构建网站。我使用了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
?
答案 0 :(得分:3)
但是,使用它们进行居中可能是您的问题的一部分。应使用auto
进行居中,例如:
div.page {
margin: 0 auto;
width: 925px;
}
答案 1 :(得分: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
单位保证金适合居中。