Question

此代码（来自实际页面的工作片段）在Safari＆amp; amp; 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>

如果'fixed'更改为'absolute'，那么它可以正常工作，但这不是必需的。

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

我不知道为什么完全相同的代码应该以不同的方式显示，具体取决于服务器，因此任何有关我可以检查或更改的事情的线索都将受到赞赏。

Answer 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" />

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

Answer 2

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

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

Answer 3

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

如果结果相同，我会怀疑Quirks模式存在问题（其他答案比我更彻底解决）。

Answer 4

你可以尝试将！important放在终结符之前的固定位置旁边吗？

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

相同的HTML在不同的主机上提供不同的布局

4 个答案: