服务器端包括休息布局 [英] Server side include breaks layout

问题描述

我终于完善了我的网页，并在每个浏览器中完美运作。然而，当我将页眉和页脚内容抽象到服务器端包含内容时，Firefox / Opera / Safari中的布局略有变化，但在IE中，布局变化使得页面看起来坏了。

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

编辑：我修复了我的问题改变抽象的代码（我只是比以前更抽象一个父标签）。但是，我仍然渴望确切地知道为什么这个错误发生在第一位。是否有人在那里可以阐明可能导致这种情况的具体内容？ 解决方案

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

我的原始包含内容如下所示：

 < header> 
 <！ - ＃Include File =/ includes / header.shtm - > 
< / header> 
  

包含的文件为：

 < NAV> 
< ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃>产品< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
< li>< a href =＃>联络人< / a>< / li> 
< / ul> 
< / nav> 
  

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

 <报头> 
< nav> 
 <！ - ＃Include File =/ includes / header.shtm - > 
< / nav> 
< / header> 
  

I have finally perfected my web page and it works perfectly in every browser.

However, when I abstracted out the header and footer contents into server side includes, the layout changes marginally in Firefox/Opera/Safari, but in IE, the layout changes makes the page look broken.

Are there any known issues that could cause the layout to change when using SSIs? Quite frankly, I'm surprised that using a SSI would have an effect like this. I am using HTML5 tags, the modernizr js library, and the page validates if any of that matters.

EDIT: I fixed my problem by changing what code was abstracted (I simply abstracted one parent tag further than before). HOWEVER, I am still eager to know exactly why this bug happened in the first place. Is there someone out there who could shed light on what in particular could cause this?

解决方案

The issue ending up being a bug with how the server parsed the HTML and with HTML5 tags. For whatever reason, when I added one extra tag set to the SSI, it worked.

My original include looked like this:

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

with the included file being:

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

But when I took all of the HTML5 tags out of the include, as shown below, everything worked as normal. I'm not sure if this is an issue with an old version of apache or what, but doing this fixed everything.

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

这篇关于服务器端包括休息布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！