Chrome和FireFox之间DOM差异的元素顺序？答案

【问题标题】：Element order in DOM difference between Chrome and FireFox?Chrome和FireFox之间DOM差异的元素顺序？
【发布时间】：2011-12-01 05:34:19
【问题描述】：

在我正在开发的网络应用程序中，在 Chrome 和 Firefox 之间进行测试时，我发现元素在 DOM 中的位置有所不同。

在 Chrome 中查看页面时，<head> 标记中的元素似乎被放置在 <body> 中，还有一些空格。在 FireFox 中查看该站点时不会出现此问题。

什么会导致这样的元素错位？ http://archives.wsusignpost.com

我在 PHP 中生成页面，从 MySql 数据库中提取数据。

db.php包含在header.php中，而header.php包含在index.php中

header.php：

<?php require('db.php'); ?>
<!DOCTYPE html>
<html>
    <head>
        <title>The Signpost: Archives</title>
        <meta name="keywords" content="..." />
        <meta name="title" content="..." />
        <meta name="description" content="..." />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link href="style.css" rel="stylesheet" type="text/css" />

    </head>
    <body>
        <div id="container">
            <a href="http://www.wsusignpost.com">
                Main Signpost Website
            </a>
            <h1>
                <img id="banner" src="..." \>
            </h1>

【问题讨论】：

可能与开发工具有关，因为如果您查看源代码（我的意思是 Ctrl+U），代码是正确的（抱歉之前的评论，我搞混了哈哈）
是的，源代码在视图源中看起来确实正确。好奇渲染还是不一样。

标签： php firefox dom google-chrome

【解决方案1】：

我以@Lachlan 有见地的回答为基础，并在此基础上进行了扩展：

ï»¿

表示页面上呈现的字节顺序标记符号。其中有 2 个，看起来这两个文件（主页和所需的一个）都使用带有 BOM 的 UTF-8 保存，这可能会导致呈现问题（在 DOCTYPE 之前出现）。尝试在编辑器中将文件另存为UTF without BOM，看看是否能解决问题。

【讨论】：

确实是BOM。感谢您指出了这一点！看起来是时候找到更好的文本编辑器了...
没必要，只需将新文档的首选项设置为 UTF 没有 BOM :)

【解决方案2】：

服务器响应的前两行是：

ï»¿ï»¿<!DOCTYPE html>
<html>

不完全确定 ï»¿ï»¿ 在那里做什么，但我怀疑你的 PHP require() 包含一些奇怪的东西。您的页面在保存后会导致 TextMate 完全崩溃 --- 所以有些事情肯定是不正常的。

【讨论】：

感谢您指出这个问题。修复它（根据@Damien 的回答）是我的解决方案。