在我的网站上,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 或来自服务器的响应标头。我也许可以通过实验找出答案,但这会很不方便且耗时,所以在我这样做之前,我想问:为什么会发生这种情况以及可以采取什么措施?
EDIT:我想出了一个Fiddle http://jsfiddle.net/Wmq4M/。在那个网站上看起来不错。
EDIT 2:以下是来自生产服务器的响应标头:
HTTP/1.1 200 好
服务器:Apache-Coyote/1.1
内容类型:text/html;charset=utf-8
内容语言:en-US
内容长度:291
日期:2012 年 1 月 18 日星期三 21:32:48 GMT
EDIT 3:以下是我个人服务器的响应标头:
HTTP/1.1 200 好
日期:2012 年 1 月 18 日星期三 21:37:30 GMT
服务器:阿帕奇
变化:接受编码
内容编码:gzip
内容长度:176
保持活动:超时=2,最大值=100
连接:保持活动状态
内容类型:text/html;charset=utf-8
生产服务器不应用 gzip 压缩,因为它只对超过一定大小的文件执行此压缩。如果我添加一些东西使文件足够大,它会使用 gzip,并且我在 IE7 中仍然会看到问题,所以这似乎与 gzip 没有任何关系。
我尝试配置我的个人服务器以发送像生产服务器一样的“Content-Language”标头,但这并没有触发问题。
我不知道其他标题是否与此有关。我可以尝试测试它们,但这会有点棘手,所以可能需要一些时间。
EDIT 4:即使我打开兼容模式,我在 IE8 中也没有注意到这个问题。我正在 Windows XP 上对此进行测试,以防万一。
EDIT 5:我将字符集放在个人服务器的 Content-Type 标头中。它没有引发问题。
EDIT 6: Here are some screenshots:
Served from the production server:
Served from my personal server:
Loaded directly from my hard drive:
EDIT 7:我终于知道是什么原因造成的了!我尝试输入javascript:alert(document.compatMode)
进入地址栏。个人页面和直接页面显示CSS1Compat
但生产页面显示BackCompat
. 浏览器似乎仅在从生产服务器渲染页面时才处于怪异模式。到目前为止,我不知道为什么会发生这种情况,也不知道该怎么办。
EDIT 8:我遗漏了一个细节:屏幕截图实际上来自我的开发环境,它模拟生产服务器但在我自己的计算机上运行。这将使 BoltClock 的回复看起来合理,除了我们的实际生产服务器上也出现了同样的问题,该服务器的 IP 地址与 173 匹配。..*。为什么我会在该服务器上看到问题?这也是私有IP地址吗?了解实际生产服务器正在使用 https 可能会有所帮助。
EDIT 9:由于赏金到期,问题不再出现在生产服务器上,但它仍然出现在我的开发环境(10.1.10.34)中。我不知道为什么。我想我会把它归咎于宇宙射线,除非我能拿出更多证据。