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

【问题标题】：Using em for layout causes inconsistency across different browsers使用 em 进行布局会导致不同浏览器之间的不一致
【发布时间】：2012-01-30 15:26:27
【问题描述】：

我正在尝试使用弹性布局构建网站。我使用了 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 设置固定宽度，则#other 和#footer 的background 保持固定。所以我试图通过将width 设置为100% 并使用margin: 0 8em 0 8em 将画廊和#other 和#footer 的内容居中来解决它。

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

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

【问题讨论】：

在没有参考资料的情况下，几乎不可能准确地告诉发生了什么。如果可以，请提供链接。

标签： css cross-browser pixel em elasticlayout

【解决方案1】：

保留em 或百分比。 They 做 work.

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

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

【讨论】：

您还需要指定元素的宽度才能使居中正常工作。

【解决方案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 单位时出现的不一致问题，在 body 标签上设置一个 px 值和一个普遍可识别的字体（标准网络字体或者可能是 @font-face）将有助于标准化 @987654334 @unit 值在 css 级联中较低。

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

【讨论】：

+1 关于可变字体的优点。但是，OP 确实使用了重置样式表。所以你描述的应该影响很小。
@Jason McCreary--但是如果重置样式表的正文字体设置为百分比（如 OP 所述），那么它仍然是用户（浏览器）依赖于初始字体大小，这可以对以后的 em 大小产生巨大的影响。