段落标记中的文本对齐因浏览器而异

Question

我正在重新设计我的网站，我遇到了一个奇怪的问题。我有一个简单的段落align: center。它在Chrome中完美显示，但文本在Firefox和IE中向右移动。

我将所有段落标记设置为margin: 0px作为基线。我注意到，当我删除它时，Firefox将其标准的1em边距添加到顶部和底部，文本变为居中。但是，我的布局需要零边距。

这是我的HTML：

<div id="headline">
<p>It’s <span>easy</span> to get a great website, when you know how.</p>
<div>

以下是相关的CSS：

p {
  margin: 0px;
  padding: 0px;
}

#stage #headline p {
  font: bold 3em/1.2em Montserrat,Helvetica,Arial,sans-serif;
  padding: .2em 6%;
}

#stage #headline p {
  text-align: center;
}

Answer 1

标题内容中有一个元素正在向下推到段落左侧的区域。

将clear:both;添加到#stage #headline p语句（任一个）以便直观地解决问题。

Answer 2

在#smallMenu > .small-inner内，有未清除的浮动元素。他们将段落中的文字推到右边。

您可以使用

#smallMenu > .small-inner {
    overflow: hidden;
}