服务器端包括休息布局答案

【问题标题】：Server side include breaks layout服务器端包括休息布局
【发布时间】：2011-06-03 01:30:21
【问题描述】：

我终于完善了我的网页，它在每个浏览器中都能完美运行。

但是，当我将页眉和页脚内容抽象到服务器端包含时，Firefox/Opera/Safari 中的布局略有变化，但在 IE 中，布局变化使页面看起来很糟糕。

在使用 SSI 时，是否存在任何可能导致布局发生变化的已知问题？坦率地说，我很惊讶使用 SSI 会产生这样的效果。我正在使用 HTML5 标记、modernizr js 库，并且页面会验证这些是否重要。

编辑：我通过更改抽象的代码解决了我的问题（我只是比以前进一步抽象了一个父标记）。但是，我仍然很想知道究竟为什么会发生这个错误。有没有人可以阐明具体可能导致这种情况的原因？

【问题讨论】：

它不应该改变任何东西，因为包含是在“服务器端”处理的，并且返回给浏览器的只是 HTML。该问题最有可能出现在抽象中。也许您缺少结束标签或其他东西？这是我认为最有可能的答案。
正如 Jamie 所说，SSI 应该没有效果。客户应该不知道网页是由乐高而不是一块大砖组成的。您可能在某个地方犯了错误。

标签： html server-side-includes

【解决方案1】：

可能不是 SSI 导致了任何问题。

HTML代码中的换行符导致IE插入无关空格，导致布局中断，这是完全可能的。

另外，当您将片段移动到包含时，请确保正确分隔代码。通过验证器运行您的 HTML 可能最容易检查这一点。

【讨论】：

代码分离得很好。除了将 html 代码剪切并粘贴到相应的 SSI 之外，我没有添加或更改任何内容。所以如果我没有添加任何额外的空间来自哪里？
capdragon 涵盖了我在说 IE 可能会添加无关空格时所说的内容。特别是 IE 对在源代码中的多行分隔的标签末尾添加一个额外的空格非常挑剔。这很可能是您的问题。

【解决方案2】：

我遇到了类似的问题并修复如下。

我有这样的事情：

<div>
   <include>
</div>

并通过将其更改为以下内容来修复它：

<div><include></div>

【讨论】：

我在 HTML 中修剪了空白，在 SSI 中又修剪了一遍，但没有解决问题。

【解决方案3】：

这个问题最终成为服务器如何解析 HTML 和 HTML5 标记的错误。无论出于何种原因，当我向 SSI 添加一个额外的标签集时，它就起作用了。

我的原始包含如下所示：

<header>
    <!--#Include File="/includes/header.shtm"-->
</header>

包含的文件是：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

但是当我从包含中取出所有 HTML5 标记时，如下所示，一切正常。我不确定这是不是旧版本的 apache 的问题还是什么，但这样做可以解决所有问题。

<header>
  <nav>
    <!--#Include File="/includes/header.shtm"-->
  </nav>
</header>

【讨论】：

【解决方案4】：

可能是 UTF-8 的文件编码问题，在包含文件的开头插入 BOM 字符。我的解决方案是将包含文件保存为没有 BOM 签名的 UTF-8。

我注意到在 body 标记显示额外空间之后有 include 语句，但是在 include 语句周围添加（任何？）html 标记会隐藏它。我猜浏览器会在字符“内部”而不是开头时忽略字符。

我的特殊情况涉及 Visual Studio，但它出现了多种编辑器。另见

【讨论】：