相同的 HTML 在不同的主机上给出不同的布局答案

【问题标题】：Same HTML gives Different Layout on Different Hosts相同的 HTML 在不同的主机上给出不同的布局
【发布时间】：2011-08-16 14:08:17
【问题描述】：

此代码（它是来自实际页面的有效 sn-p）在 Safari 和 Firefox 以及 IE7 和 8 上的一个虚拟主机上按预期工作，但是当它移动到另一个主机时，“固定”位置在 IE 上被忽略：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test Page</title>
    <style type="text/css">
        .alrtfrnt   { background-color:gray;}
        .alrtfrnt   { position:fixed;top:33%;left:33%;height:150px;width:300px;z-index:9;}
    </style>
</head>
<body>
    <div class='alrtfrnt'></div>
</body>
</html>

如果将“固定”更改为“绝对”，则可以正常工作，但这不是要求。

这不太可能是缓存问题，因为这从“真实”页面开始，并一直持续到一些全新的页面。我还更改了块上的颜色以确保被拾取并设置 IE 以检查每次页面访问时的更新。

我不知道为什么完全相同的代码应该根据服务器以不同的方式显示，所以任何关于我可以检查或更改的下一件事的线索将不胜感激。

【问题讨论】：

在 HTML/CSS/脚本文本输出方面完全相同的页面会在不同的服务器环境（您的主机）中显示不同，这是荒谬的。请提供一些链接进行演示。
一种解释可能是缓存，因为它基于域名。确保在重新加载页面之前清除缓存。
我为什么要问这个问题，或者如果我的代码没有发生的话，我为什么要费力地将我的代码削减到绝对最低限度？这很可能是“荒谬的”，但我有两个不同主机上的相同页面，它们以不同的方式显示。我无法提供链接，因为测试页面位于本地 VM 上。
@Thilo，好点子。我已更新问题以解释为什么它不太可能是缓存问题。
只有不同版本的 IE 才能导致您遇到的问题！请记住，主机不会改变客户端浏览器读取页面的方式...

标签： html css

【解决方案1】：

让我们称你的两个主机 A 和 B：

主机 A - 一切正常。

主机 B - 搞砸了，position: fixed 不起作用。

问题几乎可以肯定是 IE 在Quirks Mode 中显示主机 B。

您可以通过按 F12 并查看文档模式来验证这一点。

如果显示“IE8 标准”，那么一切正常。
如果它显示“Quirks Mode”，那么事情（例如position: fixed）将不起作用。

以下是确定确切 Internet Explorer 恢复到 Quirks 模式的原因的指南：

http://hsivonen.iki.fi/doctype/#ie8modes

如果这看起来有点太复杂，您可以（在几乎所有情况下）通过添加此元标记来强制正确的文档模式：

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

如果有帮助，我还写了一些关于同一件事的其他答案：

【讨论】：

这与怪癖模式有关，由一个 vhost 而不是另一个 vhost 使用的模块触发。感谢您提供全面的答案和链接。
出于好奇，它是哪个模块？

【解决方案2】：

服务器模块可能会弄乱您的输出并混淆 IE。例如，mod_pagespeed 这样做是为了优化目的，尽管我没有听说 IE 有问题。我会在 IE 正在读取的源代码（而不是保存的文件本身）上运行 diff。

如果结果是相同的，我会怀疑 Quirks Mode 存在问题（其他答案比我更彻底地解决了这个问题）。

【讨论】：

【解决方案3】：

一台主机可能会触发兼容模式或怪癖模式。我会检查一些要点：

确保标记完全相同 - 即使页面顶部的评论也可能会改变呈现。
两台主机的定义相似 - 例如，两台主机都位于受信任的 Intranet 位置。
这是一个愚蠢的问题 - 但所有机器上都会发生这种情况吗？兼容模式可以手动触发，并由浏览器保存（每个域，iirc，因此它可能是针对该主机上的内部页面触发的，而不是其他主机上的）。
在互联网上，一台主机可能在Compatibility View List 上。你可能就这么幸运。
IIS -
- 确保已安装所有更新。
- 可以configure IIS to trigger compatibility mode by sending custom headers：棘手。

【讨论】：

这实际上是作为评论开始的，因为它主要是猜测，但增长了很多......
"It is possible, that one host triggers compatibility mode or quirks mode." 的想法绝对是正确的

【解决方案4】：

您可以尝试将 !important 放在终止符之前的固定位置旁边吗？

.alrtfrnt   { position:fixed !important;top:33%;left:33%;height:150px;width:300px;z-index:9;}

【讨论】：