圆月山庄资源网

IE6 position:fixed bug (固定窗口方法)
网页制作 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com
然后，开始写代码，测试，最终，IE6下依然有问题。position:fixed;没有正常显示。
IE6 position:fixed bug (固定窗口方法)
正确的代码：预览/Demo | ie6_position_fixed_bug.txt(源代码)

提示：您可以先修改部分代码再运行
在别的文章中看到，可以用position:absolute;来解决IE6的问题，不过，添加position:absolute;之后，依然没有成功。当然，最终，还是用position:absolute;来解决。只是，不一定能成功。因为，有一句非常重要的话需要理解。

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

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

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

复制代码代码如下:
html{overflow:hidden;} // 重要！
body{height:100%;overflow:auto;}

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

复制代码代码如下:
html{overflow:hidden;}
body{height:100%;overflow:auto;}
#rightform form{position:absolute;right:30px;top50px;}

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

复制代码代码如下:
#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;}

完整代码请看上面链接提供的txt文件。问题的原理就是这么简单。不知道，你能理解不?
标签：
IE6,position
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接