武林網(www.companysz.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>
|
新聞熱點
疑難解答