<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/><meta name="Author" content="Stu Nicholls"/><meta name="Keywords" content="Cascading, Style, Sheets, CSS1, CSS2, CSS, XHTML1.1, w3c, doing it with style, recommendations, opacity, box model, mozilla, opera, netscape, internet explorer, v6, v7.23, techniques, layout, three column, cutting edge, experimental, validation, validate, navigation, pop-up, pull-down, menus, tips, tricks, css mouseover, mouseovers, CSS Frames, CSS menu, CSS menus"/><meta name="Description" content="CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS"/><title> CSS position:fixed; for IE6</title>
<style type="text/css">
html {background:#ccc;}
html body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow:auto; background:#ccc;}body {font-family: georgia, serif; font-size:12px;}#page {margin:310px 0 50px 250px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}#page .right {font-size:30px; float:right;}#menu {display:block; top:10px; left:10px; width:130px; position:fixed; border:1px solid #990000; padding:10px; text-align:center; font-weight:bold; color:#990000; background:#fff;}* html #menu {position:absolute;}#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#CC0000;}#menu a:hover {background:#aaa; color:#fff;}.clear {clear:both;}</style><!--[if IE 6]> <style type="text/css"> /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;} /*]]>*/ </style><![endif]--></head><body><div id="page"><div class="right">position:fixed;</div><div class="clear"/><a name="bites"/><div class="right">Another one bites the dust~</div><div class="clear"/><p>Well, they said it couldn't be done in IE6 because of a browser bug.</p><p>But they didn't know that another bug works in a way that ALLOWS this to be done!</p><p>This page has a fixed menu in the top left hand corner of the screen. This menu will remain on screen at all times in NN7, Opera, Mozilla, Firefox AND IE6!!</p><p>Just scroll this page and see the menu pass over the top without so much as a flicker (not like those javascript things that jerk and jump down the screen trying to keep up with the scroll). In fact IE6 handles the scrolling better that Mozilla/Firefox.</p><p>This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.</p><p>Just take a peek at the source code to see that all it takes is a setting of height:100% for the body (with overflow-y:auto) and it works.<br/>Anything that is position:absolute; or position:relative; will now be FIXED in IE6.</p><p>The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.</p><div class="right">and there you have it~</div><div class="clear"/><p>The rest of this page is just put in to fill up the space to extend the div out of the screen area</p><p>Taking this to extremes you have <a href="http://www.cssplay.co.uk/layouts/frame.html">The Holy Grill</a></p><p>This page is <a href="http://validator.w3.org/check/referer">Valid XHTML1.1</a>.</p><p>?2004 Stuart A Nicholls ~all rights reserved (but help yourself to the code anyway ;)</p><p>Back to the <a href="http://www.cssplay.co.uk/">Home Page</a>.</p><p>Let's stuff a few images at the end to see if there is a problem in IE.</p><p>Looks ok to me?</p><a href="#bites">Goto 'Another one bites the dust'</a><br/></div><div id="menu"><a href="#" title="Dummy menu item">Mozilla</a><a href="#" title="Dummy menu item">Opera</a><a href="#" title="Dummy menu item">Netscape</a><a href="#bites" title="Dummy menu item">Firefox</a><a href="#" title="Dummy menu item">IE6</a><a href="#" title="Dummy menu item">Windows</a><a href="#" title="Dummy menu item">Style</a><a href="#" title="Dummy menu item">CSS</a><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=position%20fixed" title="Your comments">Comments</a></div></body></html>实现兼容IE6的方式:
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
CSS的精华部分在:
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:#ccc;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed;
* html #menu {position:absolute;}
#menu {display:block; top:10px; left:10px; width:130px; position:fixed;
* html #menu {position:absolute;}