Server side include breaks layout

问题

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?

回答1:

Chances are that its not SSI that's causing any issues.

It's entirely possible that there are newlines in the HTML code causing IE to insert extraneous spaces, causing the layout to break.

Also, be sure you separated the code correctly when you moved pieces to the includes. It is probably easiest to check this by running your HTML through a validator.

回答2:

I was having a similar problem and fixed as follows.

i had something like this:

<div>
   <include>
</div>

and fixed it by changing it to this:

<div><include></div>

回答3:

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>

回答4:

It may be a file encoding problem with UTF-8, inserting BOM characters at the beginning of the included file. My solution was to save the include file as UTF-8 without the BOM signature.

I noticed having the include statement just after the body tag showed the extra space, but adding (any?) html tag around the include statement hides it. I'm guessing the browser ignores the characters once they're "inside" the body instead of the beginning.

My particular situation involved Visual Studio, but it shows up with a mix of editors. See also

How can I avoid the blank space when using PHP include?
Force Visual Studio (2010) to save all files in UTF-8
UTF-8 without BOM

来源：https://stackoverflow.com/questions/4588277/server-side-include-breaks-layout

标签

html

server-side-includes