IE6 position:fixed bug (固定窗口方法) -

highfly-s

浏览: 100759 次
性别:
来自: 北京

最近访客更多访客>>

葉孤橙

chenning_001

变脸zr

lsw_fly

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

IE6 position:fixed bug (固定窗口方法)

博客分类：

WEB前端

今天herb同学在twitter上问到，如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题，不过，当时并没有解决，用JS有现成的方法，不过，这次要求的就是不用JS。然后，开始写代码，测试，最终，IE6下依然有问题。position:fixed;没有正常显示。

ie6 position:fixed bug

在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为，有一句非常重要的话需要理解。

以下是代码片段：[www.xlnv.net]

fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。(via，刚才竟然没找到来源，囧。)

只有记住了这句话，才知为什么position:absolute;很多地方都给出了结果，但当时并未能解决。因为html被我设置 position:relative。是上面这一句启发了我，最终才能够解决这个问题。我们拉动滚动条的时候，内容都会随着窗口滚动；这时滚动的是 body。如果让绝对定位的父级元素定为body，刚我们需要固定的某个模块将会固定在网页的某个位置，而不是固定在窗口的某个位置（貌似在 firefox中，html与body之间的介限并不明确?）。

我们需要做的是，让body保持其原有高度，让html只有一个窗口那么高。代码我们可以这样写：

以下是代码片段：[www.xlnv.net]

html{overflow:hidden;} // 重要！
body{height:100%;overflow:auto;}

这时，html将只有一个窗口那么高，超过的，直接hide。而body会随高度自动变化。这时，我们可以利用绝对定位来定位我们想要固定在窗口某个位置的模块。假设我们要固定的内容在右上角，代码可以这样写：

以下是代码片段：[www.xlnv.net]

html{overflow:hidden;} 
body{height:100%;overflow:auto;} 
#rightform form{position:absolute;right:30px;top50px;}

这样，窗口就固定在右上角了。而其他浏览器，我们可以用position:fixed;来解决固定的问题。其他浏览器完整的代码如下：

以下是代码片段：[www.xlnv.net]

#rightform {text-align:center;padding:50px;font:14px/22px Georgia, "Times New Roman", Times, serif;height:1200px;background:#ffc;} 
#rightform h1 {font-family:arial;background:#e8edef;height:300px;line-height:300px;margin-bottom:200px;} 
#rightform p {line-height:1.5em;background:#ffdfff;padding:90px 0;} 
#rightform form {background-color:#ddd;padding:10px 20px;border:1px solid #aaa;position:fixed;right:30px;top:120px;}

HTML代码[www.xlnv.net]

<!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>IE6 position:fixed bug</title>
<style>
* {
 padding:0;
 margin:0;
}
#rightform {
 text-align:center;
 padding:50px;
 font:14px/22px Georgia, "Times New Roman", Times, serif;
 height:1200px;
 background:#ffc;
}
#rightform h1 {
 font-family:arial;
 background:#e8edef;
 height:300px;
 line-height:300px;
 margin-bottom:200px;
}
#rightform p {
 line-height:1.5em;
 background:#ffdfff;
 padding:90px 0;
}
#rightform form {
 background-color:#ddd;
 padding:10px 20px;
 border:1px solid #aaa;
 position:fixed;
 right:30px;
 top:120px;
}
</style>

</head>
<body>
<div id="rightform">
  <h1>
  <a href="" title="IE6 position:fixed bug" rel="bookmark">IE6 
position:fixed bug</a>
  </h2>
  <p>position:fixed; vs position:absolute;<br />
    Created by <a href="http://www.xlnv.net/" 
title="sofish">xlnv.net</a> from <a 
href="http://www.xlnv.net/" title="blog">小龙女</a></p>
  <form id="g_search" method="get" action="#">
    <input id="g_s" name="g_s" type="text" value=""  />
    <input id="g_submit" name="g_submit" type="button" value="search"
 />
  </form>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

转载自：http://www.cssdiy.com/Article/csshack/201104/1247.html

分享到：

兼容IE6 min-width 的CSS 样式 | 不确定图片大小让元素水平垂直居中

2013-10-23 17:26
浏览 804
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

IE6 position:fixed bug (固定窗口方法)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

IE6 position:fixed bug (固定窗口方法)

评论

发表评论

相关推荐

backbone学习资料

解析目录树

csv生成

网站性能优化解决方案

八种创建等高列布局

多次调用同一异步方法体会出现使用相同的属性值问题

时间的计算

async when then

异步并行串行编程 when

HTML 与javascript自解码机制

三列百分之比布局

JSp生重复提交解决方法

AMD 和 CMD 的区别有哪些？

firefox 专属css hack

自适应网页设计

跨浏览器兼容性总结

IE6 PNG背景透明解决方法（汇总）

兼容IE6 min-width 的CSS 样式

不确定图片大小让元素水平垂直居中

用uploadify 仿做微博多个图片上传

最近访客更多访客>>