0

我正在尝试使用弹性布局构建网站。我使用了 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() 无重复顶部中心固定；} 

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

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

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

`

如您所见，如果我为 设置固定宽度body，则backgroundfor#other和#footer保持固定。width所以我试图通过设置to100%和 usingmargin: 0 8em 0 8em来让画廊和 and 的内容居中#other来绕过它#footer。

我试图实现的布局基本上是一个包含图片库的单列布局。整个画廊应该在页面中居中。我已经用于em定义margin，这会在不同的浏览器中导致不同的结果。如果画廊在一个浏览器中居中，其他浏览器会显示不同的结果。我尝试过 Firefox、Chrome 和 IE9。

有没有办法使用em作为测量单位来产生相同的布局？或者我应该尝试固定布局并使用px而不是em？

4

2 回答 2

3

保持em或百分比。他们 确实 工作。

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

div.page {
  margin: 0 auto;
  width: 925px;
}
于 2011-12-30T15:23:15.330 回答
2

您的不一致是多种因素的结合。定义你的意思body {font-size: 62.5%}是告诉浏览器以基本字体大小设置的 62.5% 显示字体（这既是用户控制的，甚至是每个字体可变的）。然后，em稍后在 css 级联中使用再次根据刚刚定义的字体大小应用缩放因子（缩放更难定义：参见http://webdesign.about.com/od/fonts/qt/em-起源.htm）。因此，设置为的浏览器字体14px将变为8.75px(14 * .625)，2em理论上可能是17.5px(8.75 * 2)（为了便于说明）。如果浏览器有一个默认的 16px 字体，那么这两个数字在10px理论上是20px.

因此，为了帮助解决使用em单位时的不一致性，px在标签上设置一个值和一个普遍可识别的字体body（标准网络字体或可能是 by @font-face）将有助于标准化emcss 级联中较低的单位值。

如果您有一个“固定宽度”容器，Jason McCreary 的回答很好，但是如果您想“固定边距大小”，那么您当前为边距设置 apx或em单位的想法就可以居中。

于 2011-12-30T15:47:40.433 回答