Question

在我的网站上，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或来自服务器的响应头。我可以通过实验来弄明白，但这样做会很不方便和耗时，所以在我这样做之前，我想问一下：为什么会发生这种情况以及可以做些什么呢？

编辑：我想出了Fiddle。它在该网站上看起来很好。

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

HTTP / 1.1 200 OK
  服务器：Apache-Coyote / 1.1
  Content-Type：text / html; charset = utf-8
  内容 - 语言：en-US
  内容长度：291
  日期：2012年1月18日星期三21:32:48 GMT

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

HTTP / 1.1 200 OK
  日期：2012年1月18日星期三21:37:30 GMT
  服务器：Apache
  变化：接受编码
  内容编码：gzip
  内容长度：176
  保持活跃：超时= 2，最大= 100
  连接：保持活力
  Content-Type：text / html; charset = utf-8

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

我尝试配置我的个人服务器以发送“Content-Language”标头，如生产服务器，并且没有触发问题。

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

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

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

编辑6：以下是一些截图：从生产服务器提供： IE7 test on production server

从我的个人服务器提供服务： IE7 test on personal server

直接从我的硬盘加载： IE7 test directly from my hard drive

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

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

可能会有所帮助

编辑9：由于赏金已过期，问题已停止显示在生产服务器上，但仍显示在我的开发环境中（10.1.10.34）。我不知道为什么。我想我会把它归咎于宇宙射线，除非我能拿出更多的证据。

Answer 1

正如评论中所讨论的，根据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浏览器中重现您的问题，至少不能在您的个人服务器上或使用我自己的文件。如果您的生产服务器对公共访问开放，不仅仅是技术上的，也许您可以提供一个链接，以便我们可以进一步调试，因为问题显然已经本地化到只是您的生产服务器。

Answer 2

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

您的个人服务器以及通过file：//协议呈现时都正确呈现，因为它们以“边缘”模式呈现（最新的，而不是兼容模式）。但是，在生产服务器和开发服务器上，它们以兼容模式呈现。正如BoltClock所说，内部网默认执行此操作。显然，这适用于您的开发服务器（在10.1.10.34之类的本地IP上）。

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

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

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

然后关闭IE中的设置，使其以兼容模式呈现Intranet站点。

Answer 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上运行一个站点，即7无法关闭渲染，因为在ie8中您可以停止在compat模式下渲染本地Intranet站点。

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

file：//基本上是本地主机

http：//通过本地服务器

<强>更新

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

要解决此问题，我恐怕无法为您提供软件级解决方案或硬件更改。如果它始终是一个内部网站点，那么我建议将网络浏览器升级到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;。

Answer 4

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

Answer 5

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

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

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

似乎Microsoft认为“内部网”的主机部分是：

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

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

Answer 6

我觉得它与服务器有关（基于apache / coyote，我猜你正在使用tomcat？）以及与空格，BOF或不正确的utf-8设置有关的事情（i听说过标题声称是utf-8但不是的问题。如果在html声明之前有任何空格，那么也可能触发它进入怪癖模式。虽然我可能错了，但我觉得你的问题类似于Why is ie7 always in Quirks mode?

Answer 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仅在来自生产服务器的页面上忽略CSS属性选择器

7 个答案: