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

2024-07-11 08:22:34

字体：大中小

来源：转载

供稿：网友

效果地址：

<!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>fixed ie6</title><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></head><body><div class="head">header</div><div class="main">main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main main </div><div class="foot">foot</div></body></html>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

出处：http://xiebiji.com/2009/09/fixed

为了兼容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>

上一篇：CSS设置的背景图片在IE7中点击消失

下一篇：CSS Sprites探讨