打造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;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
随机推荐
- 64位计算机安装setuptool
Python Version 2.7 required, which was not found in the registry 新建注册表信息:HKEY_LOCAL_MACHINE\SOFTWARE ...
- Ajax 语法
/*** * ajax语法 * * ***/ $.ajax({ async:false, //同步请求 url:"XXXXX.do",//请求后台地址 data: {"p ...
- C#事件支持发布者/订阅者模式(观察者模式)
C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数. public delegate void delUpdate(); //委 ...
- 5-26课堂作业——组员投票Alpha版存在的问题
我们在课上讨论了Alpha版目前发现的问题,并通过投票的方式,选出其中三个认为是当前须紧要解决的问题. 问题: 1.缺少数据库: 2.用户体验不良好,游戏难度分区不明显: 3.团队成员共同工作时间少.
- GitHub 上一份很受欢迎的前端代码优化指南
http://segmentfault.com/a/1190000002587334?utm_source=weekly&utm_medium=email&utm_campaign=e ...
- STL库中的正态分布函数
在设计抽奖一类程序中,有时会需要一种概率“有较大可能获得一个普通结果,有较小可能获得一个糟糕或极好的结果”,这就可以用正态分布函数来获得这样一个结果. STL中已经提供了一系列随机分布的函数,包括正态 ...
- 回头再看N层架构(图解)
不知不觉来博客园已经快两半了,时间过的真快. 这次的目标是再回顾一下传统的N层架构并且分析一下在DDD中的N层架构. 一.先来看一看传统的N层架构 N-层架构的出现,主要是由于观注点的分离而产生,这三 ...
- alpha值的问题
但凡图像都会涉及到透明度问题.使用透明度之后就可以看到多层图像.Alpha值就是用于描述透明度的参量.Alpha值是一个百分数,alpha=1表示源文件发出的光全部被观察者观察到. 既然是透明度,那么 ...
- 黑马程序员——【Java高新技术】——类加载器
---------- android培训.java培训.期待与您交流! ---------- 一.概述 (一)类加载器(class loader) 用来动态加载Java类的工具,它本身也是Java类. ...
- 判断是否存在哈密顿路--HDU 5424
题意:给一张无向图,判断是否是哈密顿图. 哈密顿路:经过每个点有且仅有一次的一条通路. 方法:每次找度数最小的点作为起点,然后dfs整个图,看能遍历到的点的数目能否达到n. #include<i ...