注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

怎么实现IE6中无抖动固定定位  

2012-05-28 14:17:20|  分类: 兼容性 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

这是网上的一个css hack技术。可以解决这个问题
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<style type=”text/css”>
body {margin: 0; padding:0}
p{ height:50px}
html {_overflow: hidden}
body {_overflow: auto; _height: 100%}
#email {padding: 10px; background: #000; left: 0px; color: #fff; position: fixed; top:0; _position: absolute}
</style>
</head>
<body>
<div >
<textarea id=’email’ name=’email’ rows=’1′ cols=”20″ style=’ width: 192px; height:100px;border:1px solid red; overflow: hidden’ ></textarea>
<div id=’matchWindow’ style=” margin-bottom:1000px”>
匹配框
</div>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<P>这是为了增加高度</P>
<br />
<br />
<input type=”button” value=”hello” />
hello the world
</div>
</body>
</html>


利用css hack修改

css代码:
#footer
{
position: fixed;
left: 0px;
bottom: 0px;
z-index: 1000;
width: 100%;
background: url(g/footer.jpg) 0 1px;
overflow: visible;
text-align: center;
_position: absolute;
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
}

#footer是底部浮动层的id , _是针对IE6的css hack标记

解决抖动:在body的css中添加

body
{
_background: #ddd url(image/a.txt);
_background-attachment: fixed;
}

如果body中已经有背景图片了,可以用其中,html {background:url(aaa.txt) fixed}使用。也可在首页html标签中用 <html style=”background:url(aaa.txt) fixed” >

background:#ddd url(image/a.txt);可以没有这个文件,但是一定要有这句话和_background-attachment:fixed是防止抖动的

=======================================================================
已经测试,完美解决ie6下浏览器固定层抖动的问题

<!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>无标题文档</title>
<link href=”../css/global.css” type=”text/css” rel=”stylesheet” />
<link href=”../css/layout.css” type=”text/css” rel=”stylesheet” />

<style type=”text/css”>
body {
background-image:url(text.txt); /* for IE6 */background-attachment:fixed;
}
#bottomNav {
background-color:#D5D8DE;
border:1px solid #C0C3C9;
text-align:center;
z-index:999;
position:fixed;
bottom:0;
left:0; width:100%;
height:40px;
line-height:40px;
_position:absolute;
/* for IE6 */ _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
/* for IE6 */ overflow:visible;
}
</style>
</head>

<body>
<br><br>content<br><br><br>
<br><br>content<br><br><br>
<br><br>content<br><br><br>
<br><br>content<br><br><br>
<div style=”height:1000px;”> </div>

<div id=”bottomNav”></div>
</body>
</html>



 

补充:

*html{overflow:hidden;}
*body{height:100%;overflow:auto;}
#mydiv{width:300px;height:300px;position:fixed;margin-top:-150px;margin-left:-150px;background:#9C0;left:50%;top:50%;_position:absolute;}

  评论这张
 
阅读(696)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017