在 Google Chrome 和 FireFox 中呈现不同的页面答案

【问题标题】：Pages rendering differently in Google Chrome and FireFox在 Google Chrome 和 FireFox 中呈现不同的页面
【发布时间】：2010-11-17 05:07:41
【问题描述】：

我试图弄清楚为什么我的博客 (http://www.ulblog.org) 的首页在 Google Chrome 和 FireFox 之间呈现不同。它在 Google Chrome 中显示为“损坏”，但在 FireFox 中呈现没有问题。

但是，网站上的其他页面似乎在两者中都可以正常呈现（堆栈溢出显然只允许我包含一个链接，因此无法提供到工作页面的链接）。

任何帮助表示赞赏！

【问题讨论】：

尝试验证您的代码：validator.w3.org/… 您有 10 个错误并且缺少一个结束 div。
谢谢 Kieran -- 我的问题是我一辈子都无法弄清楚无与伦比的 div 是从哪里来的。其他错误似乎是“非破坏性”的，这并不意味着我不会花时间修复它们，只是我想首先正确地进行基本渲染。

【解决方案1】：

在第 238 行，您有 <p>&nbsp;</p。它应该是<p>&nbsp;</p>（即您缺少一个结束尖括号。）

【讨论】：

【解决方案2】：

（在我的 Firefox 3.6 中似乎坏了）

将#sidebar 上的margin-left 替换为float: left。

从#maincontent 中删除sidebar div 并将其放置在其下方而不是其中。

这应该可以解决大多数与 Chrome 相关的问题（对我来说是 FF）。

哦。正如@Kieran 所说，尝试验证您的代码。

【讨论】：

Apolgies Russell，它在 FF3.6 中被破坏的事实很可能是因为我尝试修复它并使其在两者中都被破坏。我现在在 3.6 中进行渲染，它又可以在那里工作了，但仍然不能在 Chrome 中工作。
我不知道您为什么要为侧边栏设置如此大的边距？当给它float: left; 工作时。将它向左浮动，与已经浮动的左侧 maincontent 结合使用，它也会按照您想要的方式定位 - 以更加语义化的方式。
另外，Chrome 在maincontent 中显示sidebar 的事实可能是由于验证器中提到的未关闭的div。
Russell，回复：“我不知道为什么……等等”这完全是由于我的无知/错误。希望我能找到这个 div。
这可能根本没有任何意义，但是当我复制源并在“