IE6 position:fixed bug (固定窗口方法)
今天herb同学在twitter上问到,如何利用CSS使搜索条固定显示于窗口的某个位置。好像之前也碰过这个问题,不过,当时并没有解决,用JS有现成的方法,不过,这次要求的就是不用JS。然后,开始写代码,测试,最终,IE6下依然有问题。position:fixed;没有正常显示。
正确的代码:预览/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;}
IE6 position:fixed bug (固定窗口方法)相关推荐
- 完美解决IE6中fixed抖动问题的方法
我们可以通过position:fixed来实现元素的固定效果,如网页中底部的"回到顶部菜单",底部的toolbar,对联广告等等,可惜fixed属性在IE6及以下是不支持的.通常的 ...
- IE6下fixed失效的解决方法
在网上找了好久,终于找到一种亲测有效的解决方法. <!--[if IE 6]> <script type="text/javascript"> (funct ...
- 移动端— position: fixed;固定定位解决方案
移动端- position: fixed;固定定位解决方案 参考文章: (1)移动端- position: fixed;固定定位解决方案 (2)https://www.cnblogs.com/ruog ...
- 完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- [css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法 把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
- 区分position:relative; position:absolute; position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; posit ...
- 修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6- ...
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
2019独角兽企业重金招聘Python工程师标准>>> <style type="text/css"> body{ background-image: ...
- 实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
- position:fixed 固定定位
一.定位 1.position:fixed 固定定位 元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性 特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
最新文章
- JavaScript知识点总结
- bat中文乱码_详解Windows下获取时间bat脚本总结,值得收藏
- iOS活动倒计时的两种实现方式
- springboot上传文件过大,全局异常捕获,客户端没有返回值
- Hibernate怎么提升数据库查询的性能 (1)
- 小学生计算机课件,小学三年级计算机教学课件
- 远程升级stm32程序_艾拉比智能成为意法半导体STM32战略合作伙伴
- 基础算法之插入排序Insertion Sort
- 极速pdf android,极速PDF阅读器 V3.0.0.2003 官方版[安卓软件]
- Cmd命令检测电脑配置:
- 小程序分销商城的功能及分销模式是什么
- 安装Xcode的方法
- 企业电子邮箱如何注册好
- Qt安装包官方下载地址
- “2022中国民营企业500强”榜单前十企业致力慈善事业
- 简述锂离子电池的分类及结构
- 水文气象学数据可视化——Panoply软件的下载
- linux下复制文件并重命名,Linux 批量复制并重命名 和 批量复制文件到多个文件夹...
- dxf geojson 转换,如何将CAD(DWG)文件转换为GeoJSON?
- 已知测量精度,计算工业相机分辨率
热门文章
- 如何更新计算机的flash player,如何在win7电脑中Adobe Flash Player自动更新?
- seata 集群_阿里巴巴和蚂蚁金服联手搞事情: Seata 我们走~
- 部署容器jenkins_使用Jenkins部署用于进行头盔检测的烧瓶容器
- Java-练习1:Bank银行模拟程序(面向对象实现)
- 去除lcd图片的摩尔纹_送上妊娠纹的最强攻略!几十款热门产品大测评!
- 人工智能撰稿将代替人工写作?我们拭目以待
- (一) pyhon 基础语法(数值 字符串 元组 列表 字典)
- Aapache status / apache2ctl status 总是403
- Spring Cloud 与 Dubbo 对比整理(2)
- 利用oracle long类型字段,插入大文本