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
Dat