首页 > 开发 > CSS > 正文

CSS教程:兼容ie6,ie7,ff的fixed

2024-07-11 09:03:30
字体:
来源:转载
供稿:网友

武林网(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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表