打造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;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
随机推荐
- 多线程下的for循环问题
List<int> _ValueLis = new List<int>(); private void AddInt(int i) { _ValueLis.Add(i); } ...
- linux输出 /dev/null
在学习Linux的过程中,常会看到一些终端命令或者程序中有">/dev/null 2>&1 "出现,由于已经遇到了好几次了,为了理解清楚,不妨花点时间百度或者g ...
- Android Context上下文解析
1.Context概念 Context,相信不管是第一天开发Android,还是开发Android的各种老鸟,对于Context的使用一定不陌生~~你在加载资源.启动一个新的Activity.获取系统 ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- python3下载远程代码并执行
第一步: 先在gist之类的网站上贴上代码,目的不是高亮,而可以raw的形式获取代码,这样可以省掉处理html的时间,我这里用的是pasteraw: 远程上的代码:http://cdn.pastera ...
- UIScrollerView遇到UINavigationController
今天在UITabBarController 的第一个Tab 页面中放入一个ScrollView, 原本以为可以正常运行. 结果却让人大跌眼镜. 每当我手动滚动或者 缓慢导航到另外一个页面时,当前的 ...
- yum只下载不安装:yumdownloader
如果只想通过yum下载软件的安装包,但是不需要进行安装的话,可以使用 yumdownloader 命令. yumdownloader 命令在软件包 yum-utils 里面. 先安装 yum-util ...
- C#导入Excel遇到数字字母混合列数据丢失解决
错误重现: ----------------------------------------------------------------------- 在导入Excel读取数据时,其中的一个字段保 ...
- c# txt文件的读写
在公司实习,任务不太重,总结一下c#关于txt文件的读写,以便以后有用到的时候可以查看一下.如果有写得不完整的地方还请补充 说明:本人C#水平可能初级都谈不上,高手轻喷,参考:http://www.c ...
- Three.js资源
学习教程:http://www.hewebgl.com/ 例子:http://threejs.org/