服务器端包括中断布局

发布于 2024-10-09 20:41:43 字数 341 浏览 4 评论 0原文

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

然而,当我将页眉和页脚内容抽象到服务器端包含时,布局在 Firefox/Opera/Safari 中略有变化,但在 IE 中,布局变化使页面看起来破碎。

使用 SSI 时是否存在可能导致布局更改的任何已知问题?坦率地说,我很惊讶使用 SSI 会产生这样的效果。我正在使用 HTML5 标签、modernizr js 库,并且页面会验证其中任何一个是否重要。

编辑:我通过更改抽象的代码解决了我的问题(我只是比以前进一步抽象了一个父标签)。然而,我仍然渴望确切地知道为什么会出现这个错误。有没有人可以阐明具体可能导致这种情况的原因?

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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

白日梦 2024-10-16 20:41:43

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

完全有可能 HTML 代码中存在换行符,导致 IE 插入无关的空格,从而导致布局中断。

另外,当您将片段移至包含内容时,请确保正确分隔代码。通过验证器运行 HTML 可能是最简单的检查方法。

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.

总以为 2024-10-16 20:41:43

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

我有这样的事情:

<div>
   <include>
</div>

并通过将其更改为这样来修复它:

<div><include></div>

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>
荆棘i 2024-10-16 20:41:43

该问题最终是服务器如何解析 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>

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>
离去的眼神 2024-10-16 20:41:43

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

我注意到在 body 标记之后有 include 语句显示了额外的空间,但是在 include 语句周围添加(任何?) html 标记会隐藏它。我猜测一旦字符位于正文“内部”而不是开头,浏览器就会忽略这些字符。

我的特殊情况涉及 Visual Studio,但它显示的是多种编辑器。另请参阅

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文