Same HTML gives Different Layout on Different Hosts
This code (which is a working snippet from actual pages) works as expected on Safari & Firefox and, on one virtual host on IE7 & 8 as well, but when it is moved to another host the 'fixed' position is ignored on IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Page</title>
<style type="text/css">
.alrtfrnt { background-color:gray;}
.alrtfrnt { position:fixed;top:33%;left:33%;height:150px;width:300px;z-index:9;}
</style>
</head>
<body>
<div class='alrtfrnt'></div>
</body>
</html>
If the 'fixed' is changed to 'absolute' then it is works fine, but that is not the requirement.
It is not likely to be a cacheing issue because this started out with 'real' pages and has continued through some entirely new pages. I have also changed the colour on the block to make sure that is being picked开发者_如何学编程 up and set IE to check for updates on every page visit.
I am at a loss as to why exactly the same code should display in a different fashion depending on the server, so any clues as to the next thing I can check or change would be appreciated.
Let's call your two hosts A and B:
Host A - Everything works fine.
Host B - It's screwed, and position: fixed does not work.
The problem is almost certainly that IE is displaying Host B in Quirks Mode.
You can verify this by hitting F12, and looking at the Document Mode.
- If it says "IE8 Standards", then things work.
- If it says "Quirks Mode", then things (such as
position: fixed) won't work.
Here's a guide to determine exactly why Internet Explorer is reverting to Quirks Mode:
- http://hsivonen.iki.fi/doctype/#ie8modes
If that seems a little too complicated, you can (in almost all cases) force the correct Document Mode by adding this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
If it helps, some other answers I've written about the same thing:
- IE not rendering CSS properly when the site is located at networkdrive
- IE - differences in behaviour between system deployed locally and remotely
- Is it possible IE8 will render CSS differently in Windows 7 vs Windows XP
It's possible that a server module is messing with your output and confusing IE. For example, mod_pagespeed does this for optimization purposes, although I haven't heard of a problem with IE. I would run diff on the source code that IE is reading (not the saved file themselves).
If they turn out to be identical, I would suspect an issue with Quirks Mode (which the other answers address more thoroughly than I could).
It is possible that one host triggers compatibility mode or quirks mode. I'd check some points:
- Make sure the markup is exactly the same - even a comment at the top of the page may change the rendering.
- Both hosts are defined similarly - for example, both are on trusted intranet locations.
- This is a silly question - but does that happen on all machines? Compatibility mode can be triggered manually, and is saved by the browser (per domain, iirc, so it may have been triggered for an inner page on that host and not on another host).
- On the internet, one host may be on the Compatibility View List. You may be that lucky.
- IIS -
- Make sure all updated are installed.
- It is possible to configure IIS to trigger compatibility mode by sending custom headers: tricky.
could you try putting !important next to the fixed position before the terminator?
.alrtfrnt { position:fixed !important;top:33%;left:33%;height:150px;width:300px;z-index:9;}
加载中,请稍侯......
精彩评论