解决IE6下position:fixed失效的方法
解决IE6下position:fixed失效的方法IE6浏览器不支持position:fixed，IE7/8/9、Firefox和chrome等浏览器都支持Fixed定位。如何解决这个问题呢？
方法一： 针对ie6写hack，其他的浏览器仍然用position:fixed属性。
使用position:absolute绝对定位来解决。构造一个滚动条，这个滚动条是包含该文档内容的滚动条（它可以是body，也可以是某个div）。position:absolute是绝对定位。脱离了整个文档流，不相对该滚动条包含的文档，而应该是滚动条包含文档的上一级元素。
方法二：完全使用position:absolute来解决固定定位问题。因为其他的浏览器都支持绝对定位。
测试所用浏览器：IE6/7/8/9、Firefox、Chrome、Safari。
下面就使用IE6浏览器看看效果吧~
代码如下：
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6 Fixed Bug</title>
<meta name="author" content="Chomo" />
</head>
<style>
* { padding:0; margin:0;}
body { height:100%; overflow:hidden; position:relative;}
html { height:100%; overflow:hidden;}
.left { position:absolute; top:10px; left:50%; width:20px; padding:40px; margin-left:-490px; height:100px; background:#EFF7FF; border:1px solid #96C2F1;}
.right { position:absolute; top:10px; left:50%; width:20px; padding:40px; margin-left:372px; height:100px; background:#EFF7FF; border:1px solid #96C2F1;}
.footer { position:absolute; bottom:0px; left:50%; width:738px; margin-left:-379px; _margin-left:-378px; height:50px; background:#EFF7FF; border:1px solid #96C2F1; text-align:center; line-height:50px;}
.box { height:100%; overflow:auto; overflow-y:scroll;}
.content { width:700px; height:2000px; margin:0 auto; background:#eee; padding:20px; font-size:12px; font-family:"微软雅黑"; color:#000; line-height:30px; }
</style>
<body>
<div class="left">左侧广告条</div>
<div class="right">右侧广告条</div>
<div class="footer">底部版权</div>
<div class="box">
<div class="content">
<p>
<h1>解决IE6下position:fixed失效的方法</h1><br />
IE6浏览器不支持position:fixed，IE7/8/9、Firefox和chrome等浏览器都支持Fixed定位。如何解决这个问题呢？<br />
方法一：
针对ie6写hack，其他的浏览器仍然用position:fixed属性。</p>
<p><!--[if lte IE 6]><br />
<style><br />
<!-- IE6-CSS --><br />
</style><br />
<![endif]--></p>
<p>使用position:absolute绝对定位来解决。构造一个滚动条，这个滚动条是包含该文档内容的滚动条（它可以是body，也可以是某个div）。position:absolute是绝对定位。脱离了整个文档流，不相对该滚动条包含的文档，而应该是滚动条包含文档的上一级元素。 <br />
方法二：
完全使用position:absolute来解决固定定位问题。因为其他的浏览器都支持绝对定位。 </p>
<p>测试所用浏览器：IE6/7/8/9、Firefox、Chrome、Safari。<br /><br />
下面就使用IE6浏览器看看效果吧~——www.Toyean.com 拓源网（转载请注明出处！）</p>
</div>
</div>
</body>
</html>[/code]
转载自：拓源网，[url=http://www.toyean.com/post/234.html]http://www.toyean.com/post/234.html[/url]
标签：[url=http://www.toyean.com/catalog.asp?tags=CSS][color=#0000ff]CSS[/color][/url] [url=http://www.toyean.com/catalog.asp?tags=HTML][color=#0000ff]HTML[/color][/url] [url=http://www.toyean.com/catalog.asp?tags=IE6][color=#0000ff]IE6[/color][/url] [url=http://www.toyean.com/catalog.asp?tags=IE9][color=#0000ff]IE9[/color][/url] [url=http://www.toyean.com/catalog.asp?tags=%E6%B5%8F%E8%A7%88%E5%99%A8][color=#0000ff]浏览器[/color][/url] [url=http://www.toyean.com/catalog.asp?tags=%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9][color=#0000ff]浏览器兼容[/color][/url]
仅供参考学习，技术交流。
页:
[1]