IE7仅在来自生产服务器的页面上忽略CSS属性选择器 [英] IE7 ignores CSS attribute selector only on pages coming from production server
问题描述
在我的网站上，IE7似乎忽略了某些CSS属性选择器。奇怪的是，它只发生在页面来自生产服务器。如果我在我的个人服务器上有完全相同的代码，或保存在我的硬盘驱动器上，它工作正常。以下是导致问题的示例：
<！DOCTYPE HTML&
< html>< head>
< title> IE显示测试< / title>
< style type =text / css>
[type = button] {
display：block;
}
< / style>
< / head>
< body>
< input type =buttonvalue =Button 1/>
< input type =buttonvalue =Button 2/>
< input type =buttonvalue =Button 3/>
< / body>< / html>
由于按钮上的显示设置为块，所以应垂直排列。但是，只有当页面从我的生产服务器提供时，才会水平排列。当我使用开发人员工具栏来检查样式时，我看不到像我通常做的显示属性。我唯一能想到的可能会导致这是页面的URL或来自服务器的响应头。我可以通过实验来计算出来，但这将是不方便和耗时的，所以在这之前，我想问：为什么会发生，可以做什么呢？
编辑：我想出了一个和 this answer by scunliffe ，似乎很可能是Internet Explorer中安全功能的效果。您的生产服务器位于您的内部网中，并通过私有的A类IPv4地址（ 10。*。*。* ）访问，我怀疑基本上导致IE7呈现奇怪模式的网页（和IE8和更高版本的兼容性视图中的页面渲染页面）。
这一切只是一个猜测，恐怕 - 我无法在任何系统上的任何IE浏览器重现您的问题，至少不是在您的个人服务器或与我自己的文件。如果您的生产服务器对公开访问，而不仅仅是技术上，或许您可以提供一个链接，以便我们可以进一步调试，因为问题显然本地化为只有您的生产服务器。 >
On my website, IE7 seems to be ignoring certain CSS attribute selectors. The strange thing is that it only happens when the page comes from the production server. If I have the exact same code on my personal server, or saved on my hard drive, it works fine. Here is an example which causes the problem:
<!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>
Since the display on the buttons is set to "block", they should be arranged vertically. But only when the page is served from my production server, they are arranged horizontally. When I use the developer toolbar to inspect the style, I don't see the "display" property like I usually do. The only thing I can think of that would possibly cause this is the URL of the page or the response headers coming from the server. I can maybe figure it out by experimenting but that would be inconvenient and time-consuming so before I do that, I would like to ask: Why is this happening and what can be done about it?
EDIT: I came up with a Fiddle. It looks fine on that site.
EDIT 2: Here are the response headers coming from the production server:
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Language: en-US
Content-Length: 291
Date: Wed, 18 Jan 2012 21:32:48 GMT
EDIT 3: Here are the response headers from my personal server:
HTTP/1.1 200 OK
Date: Wed, 18 Jan 2012 21:37:30 GMT
Server: Apache
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 176
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/html;charset=utf-8
The production server is not applying gzip compression because it only does that for files above a certain size. If I add some stuff to make the file big enough, it uses gzip and I still see the problem in IE7, so this does not seem to have anything to do with gzip.
I tried configuring my personal server to send a "Content-Language" header like the production server and that did not trigger the problem.
I don't know if any of the other headers have anything to do with this. I can try testing them but it will be kind of tricky so it may take some time.
EDIT 4: I don't notice this problem in IE8, even if I turn on compatibility mode. I am testing this on Windows XP, in case that matters.
EDIT 5: I put the charset in the Content-Type header from my personal server. It didn't trigger the problem.
EDIT 6: Here are some screenshots: Served from the production server:
Served from my personal server:
Loaded directly from my hard drive:
EDIT 7: I finally got a clue as to what is causing this! I tried entering javascript:alert(document.compatMode) into the address bar. The personal and direct pages showed CSS1Compat but the production page showed BackCompat. It seems like the browser is in quirks mode only when it is rendering the page from the production server. So far, I have no idea why this is happening or what to do about it.
EDIT 8: I left out a detail: The screenshot is actually from my dev environment, which is emulating the production server but running on my own computer. That would make BoltClock's reply seem plausible, except for the fact that the same problem is showing up on our actual production server, which is on an IP address matching 173...*. Why do I see the problem on that server? Is that also a private IP address? It may be helpful to know that the actual production server is using https.
EDIT 9: Since the bounty expired, the problem stopped showing up on the production server but it still shows up in my dev environment (10.1.10.34). I have no idea why. I think I will blame it on cosmic rays unless I can come up with some more evidence.
As discussed in the comments, according to this answer by thirtydot and this answer by scunliffe, it seems very likely to be the effect of a security feature in Internet Explorer. Your production server lives within your intranet, and is being accessed via a private, class A IPv4 address (10.*.*.*), which I suspect basically causes IE7 to render pages in quirks mode (and IE8 and newer to render pages in Compatibility View).
All this is just a guess, though, I'm afraid — I haven't been able to reproduce your problem in any IE browser on any system, at least not on your personal server or with my own files. If your production server is open to public access, not just technically, perhaps you could provide a link to it so we can debug further, as the problem is obviously localized to just your production server.
这篇关于IE7仅在来自生产服务器的页面上忽略CSS属性选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
