武林网(www.vevb.com)文章简介:兼容ie6,ie7,ff的fixed,元素上下端固定定位方法.
效果地址:
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
出处:
为了兼容ie6(万恶的东西),用的是expression的方法
在页头加入:
<style type="text/css">body{ background-image:url(about:blank); background-attachment:fixed;/*必要,防抖动*/}.head,.foot{ position:fixed !important;/*ie7 ff*/ position:absolute; z-index:21; background:#999; height:30px; width:500px;}.foot{ bottom:0 !important;/*ie7 ff*/}.main{ height:2000px;}</style><!--[if IE 6]><style type="text/css">/*ie6 fix顶端元素*/.head{top:expression(eval(document.documentElement.scrollTop));}/*ie6 fix底端元素*/.foot{ top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));}</style><![endif]-->
HTML:
<body><div class="head">header</div><div class="main"><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p><p>main </p></div><div class="foot">foot</div></body>
新闻热点
疑难解答