IE7 ignores CSS attribute selector only on pages c

2019-03-17 14:16发布

站内问答 / HTML/CSS
1521 7 6

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: IE7 test on production server

Served from my personal server: IE7 test on personal server

Loaded directly from my hard drive: IE7 test 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.

7条回答
倾城　Initia
2楼-- · 2019-03-17 14:51

Be aware that certain conditions can force Internet Explorer to display pages in a document compatibility mode different from the one specified in the webpage. These include, but are not limited to, the following situations:

  • Compatibility View is enabled for the page.

  • The page is loaded in the Intranet zone and Internet Explorer is configured to use Compatibility View for pages loaded from the Intranet zone.

  • Internet Explorer is configured to display all websites in Compatibility View.

  • Internet Explorer is configured to use the Compatibility View List, which specifies a set of websites that are always displayed in Compatibility View.

  • The Developer Tools are used to override the settings specified in the webpage.

  • The webpage encountered a page layout error and Internet Explorer is configured to automatically recover from such errors by reopening the page in Compatibility View.

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

From this we can derive your running a site on your local intranet, ie 7 can't turn off this of the rendering as in ie8 you can stop local intranet sites being rendering in compat mode.

10.x.x.x ip address production server

file:// essentially local host

http:// through your local server

UPDATE:

Okay apologies IE has numerous problems running on the intranet, IE8+ is the issue above as you mentioned IE7 doesn't use compat mode it has quirks and standard. Knowing microsoft though they may have messed it up in one of the ie7 patch updates but I hate assumptions so if someone knows please let me know.

To resolve the issue I am afraid I can't give you a software level solution or a hardware change. If its always going to be an intranet site then I recommended upgrading network browsers to ie8 minimum.

I do have a html, css fix however(i know this is not what you want):

<!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>

It doesn't seem to like [type="buttons"] using display:block;.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)