I have a site that heavily utilizes jQuery and CSS to achieve some pretty nice effects. The pages work flawlessly in FF and Chrome - however in IE9 (and possibly other versions of IE) my pages seem to be mis-formatted due to the browser seemingly ignoring my position:fixed; properties. I guess my question is: What could cause this (pretty much globally across my site) to happen? I know it's hard to say without a full code example, but I was wondering if anyone has seen this before. There is a lot of CSS so I'm not really sure what is relevant to post and what not. If more code is needed, please let me know.
Example 1: Toolbar which mimics Window Start Button Menu
In the example below, you will see I've implemented a toolbar which mimics the behavior of the Windows Start button. It sits in the bottom-left and when clicked, it expands to show content. This functionality is working great in Ch/FF, but as you can see in IE9 the toolbar and its content are being appended to the bottom of the page. I whipped up a quick JSFiddle using this method in IE9 and it seems to work OK.. I'm not sure what might be different about my document which causes this to stop working.
The Odd Thing: if I change the CSS to position:absolute;, the div gets placed correctly and function's 99% correctly - it just doesn't scroll with the page.
#floatingOptions{
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
bottom:0px;
display:none; /*this gets shown via javascript */
left:0px;
overflow:hidden;
position:fixed;
width:250px;
z-index:99999;
}
Example 2: Modal Windows Via jQuery Tools Overlay
Many of my modal windows are generated using jQuery Tools Overlay. Again, this works fine in Ch/FF but IE9 again appends the modal div to the bottom of the page (not to mention seemingly disregarding the z-index).
UPDATE
here is my doctype/html statements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
SOLUTION
I figured it out. It was a POBKAC error (Problem occurred between keyboard and chair).
my <!DOCTYPE....> is being called in header.php and I was being dumb and doing this on some pages..
<style type="text/css">
@import url(/themes/pn5/jquery.ui.all.css);
@import url(/qtip/jquery.qtip.css);
</style>
<?php include ('header.php'); ?>
so the styles were being placed into the code before the <!DOCTYPE> was declared. switched it around and problem goes away.
Thanks everyone!
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
