打造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的属性已经被表达式占用了。这个也很简单的,获取页面的宽度和高度,计算出直接的margin值就好了。
注意高度应该用document.documentElement.clientHeight,这样的话就是可视区域的高度。特别是用遮罩层的时候,否则会出现,页面可以无限下拉的情况。
打造IE6的position:fixed整理篇的更多相关文章
- 让IE6兼容position:fixed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE6下position:fixed;兼容
*html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...
- IE6的position:fixed
手头一个项目中,要实现把一个浮层控制在浏览器窗口右下角,用”position:fixed”来控制最合适不过了. 但万恶的IE6不支持这个属性,之前采用过的方法有:将滚动条转移到body上,使用绝对定位 ...
- IE6中position:fixed无效问题解决
在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...
- IE6下position:fixed不支持问题及其解决方式
IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...
- 让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解
做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscrol ...
- ie6下position:fixed定位问题
1. *html{ background-image:url(about:blank); background-attachment:fixed;}2.将需要用固定定位的元素中加上_position: ...
- 解决IE6下固定定位问题 使用position:fixed
IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
随机推荐
- 人工智能交互集成在线语音合成能力的Tips
在线语音合成就是在联网的场景下将文字转换成声音,实现机器向人的声音交互.这个概念应该是比较好理解的,下面就结合官网的Android在线合成的Demo讲解一下合成的流程以及大家经常遇到的一些问题. 到官 ...
- one recursive approach for 3, hdu 1016 (with an improved version) , permutations, N-Queens puzzle 分类: hdoj 2015-07-19 16:49 86人阅读 评论(0) 收藏
one recursive approach to solve hdu 1016, list all permutations, solve N-Queens puzzle. reference: t ...
- 学习git config配置文件
设置 git status的颜色. git config --global color.status auto 一.Git已经在你的系统中了,你会做一些事情来客户化你的Git环境.你只需要做这些设置一 ...
- json字符串返回到js中乱码
Ajax 的post请求值返回到js中时出现中文乱码的情况,但是在action中写入时并未乱码,解决办法在action中写入前,加上这两行: request.setCharacterEncoding( ...
- excel表数据对比 个人收集
做了那么久猿,转行做测试以后居然折堕到要用excel来对比数据...~—~.真是人算不如天算...不过没关系,技多不压身. 首先,准备好两个对比的数据表,sheet1 跟sheet2 .在sheet1 ...
- Pegasos: Primal Estimated sub-GrAdient Solver for SVM
Abstract We describe and analyze a simple and effective iterative algorithm for solving the optimiza ...
- JAVA编程讲座-吴老
JAVA系列公开课第4讲:多态系列课程:从JAVA编程零基础讲起,同时结合工作中遇到的具体实例,语言清晰易懂,连续10周+深入讲解,打下编程基础,让我们一起打来自动化测试的大门时间:4月25日(周一) ...
- linux 常用操作指令(随时更新)
ls: 查看当前目录下文件列表 -l 列出文件详细信息l(list) -a 列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir 创建目录 -p ...
- setInterval()与clearInterval()的一个有趣小现象
今天在使用setInterval()时,发现了一个有意思的事情 代码如下: var box=document.getElementById("box");//获取id为“box”的 ...
- webdynpro
-------------------------------------------------------------------------------------WebDynpro For A ...