段落標記中的文本對齊因瀏覽器而異

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; 
}