打造IE6的position:fixed整理篇
fixed真的是一个非常好的属性。
特别是做弹层的时候。可惜的是“国内主流浏览器”IE6大大不支持。
一般的我们都会通过CSS中的表达式来解决问题。
.fixed {
position:absolute;
left:expression(eval(document.documentElement.scrollLeft));
top:expression(eval(document.documentElement.scrollTop))
}
好吧,希望施主的钛合金眼还好。一闪一闪亮晶晶~~~
html,html body {
background-image:url(about:blank);
background-attachment:fixed
}
这个已经是IE非常出名的“BUG” 了。当滚动或调整浏览器大小时,它将重置全部内容并重画页面,会又一次处理CSS表达式。终于就闪坏了施主的钛合金眼。
上面的代码能够让浏览器在重画之前首先处理CSS表达式,这样就让你实现完美的fixed了。
事实上还有个问题了……,做弹层的时候居中的问题。
非IE6的时候
.float {
left:50%;
top:50%;
margin-left:-262px;
margin-top:-180px;
width:525px;
height:360px;
}
left和top的属性已经被表达式占用了。
这个也非常easy的,获取页面的宽度和高度,计算出直接的margin值就好了。
注意高度应该用document.documentElement.clientHeight,这种话就是可视区域的高度。
特别是用遮罩层的时候,否则会出现,页面能够无限下拉的情况。
转载于:https://www.cnblogs.com/mthoutai/p/7400195.html
打造IE6的position:fixed整理篇相关推荐
- 实现 IE6 支持 position fixed 的 CSS 属性
众所周知 IE6 不支持 position:fixed ,这个 bug 与 IE6 的双倍 margin 和不支持 png 透明等 bug 一样臭名昭著. 如何让 position:fixed 在 I ...
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题
这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...
- 完美解决IE6不支持position:fixed的bug
废话不多说,先看一下下面这段代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- 解决IE6下 position的fixed定位问题
html{ _background:url(about:blank); /* 阻止IE6闪动 , 把空文件连接换成about:blank , 减少请求 */ } /* 图层 */ .pFixed{ p ...
- 修正IE6不支持position:fixed的bug
众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6- ...
- php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中,上下左右 居中 代码如下 复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中 上下左右 居中 代码如下 复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
- 跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
- 移动Web开发实践——解决position:fixed自适应BUG
在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章<移动端web页面使用position:fixed问题总结>中已经总结了很多bug,但是在后续的开发中有关f ...
- position:fixed 兼容浏览器低版本
项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代 ...
最新文章
- Switch命令汇总
- 05APR2022 日期格式这样的怎么转换成日期?
- 数楼梯——恶心的高精斐波那契数列
- VirtualBox设置共享目录(主机win7,虚拟机Ubuntu)
- 矩阵求逆c语言实现_[V-SLAM] Bundle Adjustment 实现
- Nplayer本地文件拷到服务器,手把手教你简易NAS构建,手机/平板/智能电视随意调取,家庭存储云共享,有了自己的网络云盘后再也不用担心容量不够了!...
- 文件md5码怎么生成_Linux 系统文件校验方法--MD5,SHA1,PGP,SHA256,SHA512
- 【SICP归纳】6 副作用与环境模型
- 编写贩卖《和平精英》游戏外挂,5人被判刑;苹果推出轻App码;Firefox 84.0发布|极客头条...
- 持久化框架数据持久化框架(JPA)及其具体实现
- 阿里巴巴小程序繁星计划专题上线,汇集最优扶持资源与最新资讯!
- Acronisnbsp;Truenbsp;Image进行…
- CSP多USBkey操作获取信息
- A component is changing an uncontrolled input to be controlled. This is likely caused by the value
- 2021年度国家科技奖进入申报期,这几个问题需要重点关注!
- Python网络爬虫:基础知识Beautiful Soup
- 古汉语常用字字典_掌握了音序或部首查字法,就会查字典了?不,差得远着呢!...
- Mysql的介绍和软件环境的部署
- 【最强解决办法】日式打印图片显示不全(word预览却是全的),打印画质下降、转PDF下降等问题
- BUG修改:java.lang.NoClassDefFoundError: org/springframework/boot/Bootstrapper
热门文章
- 现在论文用手写还是用计算机写,毕业论文计算机手写数字识别技术完整版.docx...
- 2020 年百度之星#183;程序设计大赛 - 初赛一
- mysql解压rar至指定文件夹_PHP解压ZIP文件到指定文件夹的方法
- 动态页面html jquery ajax,JQuery / AJAX:使用动态内容加载外部DIV
- Hadoop面向行和面向列格式详解
- 前端知识天天学(1)
- sersync实时备份安装及设置
- 阿里要把雄安打造成AI第一城:未来30年城市长啥样?
- Linux命令(二)
- Codeforces 86C Genetic engineering (AC自己主动机+dp)