打造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;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
随机推荐
- Html标签第二课css
css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div style=& ...
- 使用strace 工具跟踪系统调用和信号
使用strace来执行程序,它会记录程序执行过程中调用,接收到的信号,通过查看记录结果,就可以知道程序打开哪些文件,进行哪些读写,映射哪些内存,向系统申请多少内存等信息 strace 移植 下载str ...
- 我收录整理的优秀OC技术类文章
自定义导航按钮UIBarButtonItem 关于导航栏的六个小技巧 ios开发的一些小技巧篇一 制作一个可以滑动操作的 Table View Cell - IOS - 伯乐在线 一个 ...
- 'java'不是内部或外部命令,另一个解决办法
我知道环境变量,也知道搞系统变量.别给我粘那些教程了,我的java路程是C:\Program Files\Java\jdk1.6.0_05谁弄好了把那三个变量和值发出来.... JAVA_HOME=C ...
- JPA使用入门
JPA能干什么?我在前面一遍文章<初步了解JPA>基本描述了.不过你不需要点击回去再看.这里简单的再提一下JPA的功能,就是:(1)实现“对象-关系”映射:(2)对象持久化到数据库:(3) ...
- Java HttpGet
String urlStr ="https://qyapi.weixin.qq.com/cgi-bin/gettoken?a=a&b=b"; URL url = null; ...
- 一个很奇怪的问题,程序没有改动加密参数应该也没有变化.但是两次的加密结果却不一致.md5加密问题
从图上我们看出20160803的加密结果是AAEBA9C578EA522215EAE76AFCAF250.时间是9.4分 现在我们再看这个同样的加密地址与时间结果却是另一种 31672B16..... ...
- Go语言并发编程示例 分享(含有源代码)
GO语言并发示例分享: ppt http://files.cnblogs.com/files/yuhan-TB/GO%E8%AF%AD%E8%A8%80.pptx 代码, 实际就是<<Go ...
- Page事件执行顺序
Page 执行中将按照如下顺序激活事件: Page.PreInit Page.Init Page.InitComplite Page.PreLoad Page.Load Page.LoadComple ...
- sync_with_stdio
/* The synchronization referred to is @e only that between the standard * C facilities (e.g., stdout ...