為什么我的文本在Safari和Chrome中對齊但在Internet Explorer / Firefox中不對齊？

Question

我的網站是wordswithfriends.net

在Safari / Chrome瀏覽器的側欄中，例如“每月倒計時”，標題和文本列表完全相同。 在IE / Firefox中，標題位於右側，而文本一直推至左側。 我的代碼有什么問題？

編輯CSS：

#sidebar h3 {
background: url (images/sidebarh3bgr.png) no repeat;
color: white;
font-size: 14px;
margin: 0 0 10px;
padding: 5px 5px 5px 18px;
}

#sidebar li .top {
padding: 0px 0px 15px 1px;
width: 333px;
background: no-repeat url(images/bcksidebarlitop.png);
}

.execphpwidget {
margin: 10px 23px 0px 10px;
padding: 5px 5px 5px 10px;
}

.textwidget {
padding: 5px 5px 5px 17px;
}

#sidebar ul {
list-style-type: none;
margin: 0;
padding: 3px 17px;
}

Answer 1

Firefox中的Firebug和IE中的Developer Tools都表明未應用為您的類* .execphpwidget定義的樣式。 兩種檢查方法均未表明樣式已被覆蓋。 它只是不存在。

對樣式表的快速驗證表明，在第470行附近，您的CSS接近尾端：
img .alignnone size-full wp-image-364 {float:right; padding:5px 10px 10px 0px;"}

參見此處： W3C CSS驗證服務

由於此錯誤，IE和Firefox會丟棄樣式表的其余部分，其中包括您缺少的左填充/邊距。

我認為Chrome和Safari更寬容。

Answer 2

CSS重置是神奇的詞:-)

每個瀏覽器都有自己的默認CSS。 這是Web開發人員面臨的最大問題之一。

例如，CSS重置將許多屬性設置為0px（ margin:0;padding:0; ）