IE7 仅在来自生产服务器的页面上忽略 CSS 属性选择器

Posted

技术标签:

【中文标题】IE7 仅在来自生产服务器的页面上忽略 CSS 属性选择器【英文标题】：IE7 ignores CSS attribute selector only on pages coming from production server 【发布时间】：2012-02-13 12:14:28 【问题描述】：

在我的网站上，IE7 似乎忽略了某些 CSS 属性选择器。奇怪的是，它只发生在页面来自生产服务器时。如果我的个人服务器上有完全相同的代码，或者保存在我的硬盘上，它就可以正常工作。这是导致问题的示例：

<!DOCTYPE html>
<html><head>
<title>IE display test</title>
<style type="text/css">
[type=button] 
  display: block;

</style>
</head>
<body>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body></html>

由于按钮上的显示设置为“块”，因此它们应垂直排列。但只有在我的生产服务器提供页面时，它们才会水平排列。当我使用开发人员工具栏检查样式时，我没有像往常那样看到“显示”属性。我能想到的唯一可能导致这种情况的是页面的 URL 或来自服务器的响应标头。我也许可以通过实验来解决这个问题，但这既不方便又耗时，所以在我这样做之前，我想问一下：为什么会发生这种情况以及可以做些什么？ p>

编辑：我想出了一个Fiddle。在那个网站上看起来不错。

编辑 2： 以下是来自生产服务器的响应标头：

HTTP/1.1 200 正常 服务器：Apache-Coyote/1.1 内容类型：text/html;charset=utf-8 内容语言：zh-CN 内容长度：291 日期：格林威治标准时间 2012 年 1 月 18 日星期三 21:32:48

编辑 3：以下是我个人服务器的响应标头：

HTTP/1.1 200 正常 日期：格林威治标准时间 2012 年 1 月 18 日，星期三 21:37:30 服务器：阿帕奇 变化：接受编码 内容编码：gzip 内容长度：176 保活：超时=2，最大值=100 连接：保持活动 内容类型：text/html;charset=utf-8

生产服务器没有应用 gzip 压缩，因为它只对超过一定大小的文件执行此操作。如果我添加一些东西使文件足够大，它使用 gzip，我仍然在 IE7 中看到问题，所以这似乎与 gzip 无关。

我尝试将我的个人服务器配置为像生产服务器一样发送“Content-Language”标头，但这并未引发问题。

我不知道其他任何标题是否与此有关。我可以尝试测试它们，但这会有点棘手，因此可能需要一些时间。

编辑 4： 我在 IE8 中没有注意到这个问题，即使我打开了兼容模式。我正在 Windows XP 上对此进行测试，以防万一。

编辑 5： 我将字符集放在我个人服务器的 Content-Type 标头中。它没有触发问题。

编辑 6： 以下是一些屏幕截图： 从生产服务器提供：

从我的个人服务器提供：

直接从我的硬盘加载：

编辑 7： 我终于知道是什么原因造成的了！我尝试在地址栏中输入javascript:alert(document.compatMode)。个人和直接页面显示CSS1Compat，但生产页面显示BackCompat。 似乎只有在从生产服务器渲染页面时，浏览器才处于怪异模式。到目前为止，我不知道为什么会发生这种情况或该怎么做。

编辑 8： 我遗漏了一个细节：屏幕截图实际上来自我的开发环境，它模拟生产服务器但在我自己的计算机上运行。这将使 BoltClock 的回复看起来是合理的，除了同样的问题出现在我们的实际生产服务器上，该服务器的 IP 地址匹配 173...*。为什么我在该服务器上看到问题？这也是私有IP地址吗？了解实际的生产服务器正在使用 https 可能会有所帮助。

编辑 9： 由于赏金到期，问题不再出现在生产服务器上，但它仍然出现在我的开发环境 (10.1.10.34) 中。我不知道为什么。我想我会把它归咎于宇宙射线，除非我能拿出更多的证据。

【问题讨论】：

@mdmullinax：IE7 无法识别该标头，它仅在 IE8 中引入。 AFAIK，没有来自服务器的 X-UA-Compatible 响应标头，尽管我目前无法查看 IE7 中的标头。 查看在按钮[type="button"]周围添加引号是否有任何效果 查看正在使用的安全区域。此外，打开每个页面的开发者工具，查看“文档模式”的内容。 @BoltClock：也许 IE7 有类似于 IE8 has 的东西？ 10.* 是一个私有 IP 地址，可能与它有关。 【参考方案1】：

正如 cmets 中所讨论的，根据 this answer by thirtydot 和 this answer by scunliffe，这似乎很可能是 Internet Explorer 中安全功能的影响。您的生产服务器位于您的 Intranet 中，并且正在通过私有的 A 类 IPv4 地址 (10.*.*.*) 进行访问，我怀疑这基本上会导致 IE7 以怪异模式 (and IE8 and newer to render pages in Compatibility View) 呈现页面。

不过，这一切都只是猜测——我无法在任何系统上的任何 IE 浏览器中重现您的问题，至少无法在您的个人服务器或我自己的文件中重现。如果您的生产服务器对公众开放访问，而不仅仅是技术上，也许您可​​以提供一个链接以便我们进一步调试，因为问题显然局限于只是您的生产服务器。

【讨论】：

好吧，显然这更像是 IE8 问题而不是 IE7 问题……让我对此进行更多研究。 神秘的是，我无法再重现该行为。或许我应该截个图……同时，启动 Windows XP 模式。 您的解释听起来有点道理，但请参阅上面的编辑 8。 @mikez302：哦，这很奇怪……不，173.*.*.* 地址不是私有 IP 地址。很好奇，您的开发服务器究竟是如何模拟您的生产服务器的？ BoltClock 说的是真的，我已经设法在 IE7 上复制了一个与 Intranet 站点类似的环境，导致同样的问题。【参考方案2】：

我刚刚在您的个人服务器 (eliasz.net) 上使用了代码，这是一个通过 file:// 协议提供的文件，并在本地服务器上提供服务。

您的个人服务器和通过 file:// 协议呈现时都正确呈现，因为它们以“边缘”模式（最新，而不是兼容模式）呈现。但是，在您的生产服务器和开发服务器上，它们以兼容模式呈现。正如 BoltClock 所说，Intranet 默认情况下会这样做。显然，这适用于您的开发服务器（在本地 IP 上，如 10.1.10.34）。

我认为生产服务器也在您的本地网络上，尽管它有一个公共静态 IP。换句话说，当您在本地网络上时，生产服务器通过本地网络而不是 Internet 提供服务。因此，IE7 仍将其视为 Intranet 站点。使用nslookup查看IE7是如何解析域名的。

要解决这个问题，您可以将其添加到您的标题中：

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

然后关闭 IE 中导致它以兼容模式呈现 Intranet 站点的设置。

【讨论】：

正如我在 cmets 中提到的，IE7 不理解 X-UA-Compatible 标头。 对不起，最后应该更详细。 IE7 中没有“兼容模式”之类的东西——它是在 IE8 中引入的。只有“怪癖模式”，而且是正在使用的模式。 什么设置会导致 IE 以 quirks 模式呈现 Intranet 站点？为什么会有所作为？上面的截图是在我的开发环境中。实际的生产服务器（在 173.*.*.* IP 地址上）有同样的问题，但我无法将这个简单的测试用例放在上面。当我有机会时，我会尝试你的 X-UA-Compatible 想法，但我认为这在 IE7 中不起作用。 @mikez302 你能检查一下它被提供给你的IP吗？您的 IT 部门可能已将 DNS 配置为通过 LAN 为其提供服务，因此对于 IE，它仍然是本地站点。 @mikez302 设置为内网区域。另一种可能性是您的 Web 服务器（例如 Apache 或 IIS）正在插入一些东西。你检查过实际渲染的源吗？【参考方案3】：

请注意，某些条件可能会强制 Internet Explorer 以不同于网页中指定的文档兼容模式显示页面。这些包括但不限于以下情况：

为页面启用了兼容性视图。

页面在 Intranet 区域中加载，并且 Internet Explorer 配置为对从 Intranet 区域加载的页面使用兼容性视图。

Internet Explorer 配置为在兼容性视图中显示所有网站。

Internet Explorer 配置为使用兼容性视图列表，该列表指定一组始终显示在兼容性视图中的网站。

开发者工具用于覆盖网页中指定的设置。

网页遇到页面布局错误，Internet Explorer 配置为通过在兼容性视图中重新打开页面来自动从此类错误中恢复。

来源：http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx

由此我们可以得出您在本地 Intranet 上运行的站点，ie 7 无法像在 ie8 中那样关闭此渲染，您可以停止本地 Intranet 站点以兼容模式渲染。

10.x.x.x ip地址生产服务器

file:// 本质上是本地主机

http://通过本地服务器

更新：

好的抱歉 IE 在内网运行时有很多问题，IE8+ 是上面的问题，因为你提到 IE7 不使用兼容模式，它有怪癖和标准。知道微软，虽然他们可能在 ie7 补丁更新中搞砸了，但我讨厌假设，所以如果有人知道，请告诉我。

要解决这个问题，恐怕我不能给你软件级别的解决方案或硬件更改。如果它始终是一个 Intranet 站点，那么我建议将网络浏览器至少升级到 ie8。

我确实有一个 html、css 修复（我知道这不是你想要的）：

<!DOCTYPE HTML> 
<html>
<head> 
    <title>IE display test</title> 
    
    <style type="text/css"> 
        #buttons  

         

        #button 
            display:block;
        
    </style> 
</head> 
<body> 
    <div id="buttons">
        <input id="button" type="button" value="Button 1"/> 
        <input id="button" type="button" value="Button 2"/> 
        <input id="button" type="button" value="Button 3"/> 
    </div>
</body>
</html>

它似乎不喜欢 [type="buttons"] 使用 display:block;。

【讨论】：

好的，那我该怎么办呢？ IE7 AFAIK 中没有兼容模式。【参考方案4】：

我看到一页是.html，另一页是.php。您的 php 页面可能在 doctype 之前有一些字符（可能是隐藏的）。它可能会对 IE 如何接受 HTML 和 CSS 产生影响。

【讨论】：

不错的观察。不过，目前尚不清楚生产服务器是运行 PHP 脚本还是提供原始 HTML 文件。 这种区别并不重要。最初，我在我的个人服务器上使用静态 HTML 页面对其进行了测试。然后我将它转换为 PHP，只是为了快速简单地设置一些响应标头。这并不影响按钮的排列。【参考方案5】：

我刚刚在 IE8 和 IE9 上都遇到了这个问题，我找到了解决方案！

现在这可能无法完全转换为 IE7，但它应该为您指明正确的方向。

在菜单中查找名为“兼容性视图”的项目。 单击它会打开一个对话框，您可以在其中添加要在“兼容性视图”中显示的网站。 在列表下方查看标有“在兼容性视图中显示 Intranet 站点”的复选框 取消选中它。

似乎微软认为“内联网”的主机部分是：

加入同一个域， 由不合格的主机名标识（例如“server”与“server.example.com”），或 由私有 IP 地址标识（10.x.x.x、172.16-31.x.x、192.168.x.x）

如果客户端系统未加入域，看起来也没有任何东西被视为“内部网”。

【讨论】：

【参考方案6】：

我感觉它与服务器有关（基于 apache/coyote，我猜您使用的是 tomcat？）并且与空格或 BOF 或不正确的 utf-8 设置有关（我'听说过标头声称是 utf-8 但不是的问题）。如果在 html 声明之前有任何空格，那也可能会触发它进入 quirks 模式。虽然我可能是错的，但我感觉您的问题与此类似 Why is ie7 always in Quirks mode?

【讨论】：

来自生产服务器的 Content-Length 正好是 291。假设 CRLF 行结束，这不太可能，但我想并非完全不可能。 我在所有 3 种情况下都使用 LF 行尾和 UTF-8 编码。 @mikez302: LF 行尾？您的生产服务器似乎正在提供 CRLF。这是它产生内容长度为 291 的响应的唯一方法。 @BoltClock，你是对的。不知何故，我不小心用 CRLF 将文件保存在服务器上。但是我只是用 LF 结尾测试了它，我仍然看到了问题。【参考方案7】：

我不认为答案是它来自哪个服务器，而是在 CSS 选择器中的值周围添加双引号的情况。

试试这个：

<!DOCTYPE HTML>
<html><head>
<title>IE display test</title>
<style type="text/css">
[type="button"] 
  display: block;

</style>
</head>
<body>
<input type="button" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" value="Button 3"/>
</body></html>

【讨论】：

IE7 未发现属性选择器存在问题，无论您排除引号、使用单引号还是使用双引号。另外，如前所述，相同的代码在个人服务器和开发服务器中也能正常工作。

以上是关于IE7 仅在来自生产服务器的页面上忽略 CSS 属性选择器的主要内容，如果未能解决你的问题，请参考以下文章

节点的几何（来自 DAE 文件）仅在生产版本中为零

php require_once 尝试仅在我的生产服务器上包含第二次

IE7+ 中的 CSS Tooltips 渲染问题

CSS样式有时仅在jsf页面上的页面刷新后应用？

如何使css规则仅在页面上有某个div id时适用

Less Css 在 IE8 和 IE7 上不起作用