IE 6 position不支持fixed属性的解决方案
抛出另一个问题:IE7已经支持position:fixed了,而IE6却不支持,解决这个问题的办法如下:
现在有一个元素的id是element,它需要实现fixed效果,我们既想要它在正常的浏览器下使用,也想要它在IE 6下正常工作,那么可以使用CSS hack:
#element {
position: fixed;
top: 450px; /* 其他浏览器下定位,在这里可设置坐标*/
_position: absolute; /*IE6 用absolute模拟fixed*/
/*IE6 动态设置top位置*/
_top: expression(eval(document.documentElement.scrollTop) + 450);
}
这样就可以实现这个元素距离顶部450像素固定,你还可以添加下面的代码实现去除页面抖动的效果:
*html body{
background-image:url(about:blank);
background-attachment:fixed;
}
在前文中,通过_top设置CSS样式,那么怎么修改expression的样式呢:
var domThis=$(this)[0];
domThis.style.setExpression(
'top', 'eval((document.documentElement).scrollTop + ' + 50 + ')'
);
通过这种方式,就可以达到修改的目的了。
-------------------------------------------------------------------------------------------------------------------------------------
本文非原创,转载自: http://www.tonitech.com/1505.html
IE 6 position不支持fixed属性的解决方案的更多相关文章
- IOS系统不兼容position: fixed;属性的解决方案
position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...
- 解决IE6不支持position:fixed属性
最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- (转)实例详解CSS中position的fixed属性使用
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left&qu ...
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- position的四个属性值
1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> <div id="s ...
- 谈一谈手机WebApp的fixed属性(手机上的固定栏)【转】
1.iphone/android原生app常见结构 似乎,所有的手机应用,都遵循这样的布局:固定的顶部+固定的底部+可滚动在中间区域.这种“雷同”的模式让人恶心,却不得不承认这是一种很规矩却又很实用的 ...
- 【学习笔记】HTML position(static、fixed、relative、absolute)
[本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent"> ...
随机推荐
- 谷歌js编码规范解析
http://alloyteam.github.io/JX/doc/specification/google-javascript.xm 阅读了谷歌js编码规范,我发现了很多,js的里面很多要注意的问 ...
- adb usage
使用安卓调试及自动化,不可避免的要使用adb,说明看起来很麻烦,进行简单记录,以便时候不时之需. usb连接手机调试就很简单了.首先,在手机端开启usb调试,即点击安卓版本项7次,就可以显示开发者菜单 ...
- 目标检测之Faster-RCNN的pytorch代码详解(数据预处理篇)
首先贴上代码原作者的github:https://github.com/chenyuntc/simple-faster-rcnn-pytorch(非代码作者,博文只解释代码) 今天看完了simple- ...
- 容器基础(七): 使用docker compose部署程序
配置 在上一节的基础上, 增加如下的docker-compose.yml文件, 然后用docker-compose up命令启动容器进行部署: version: " services: s ...
- Android之内容提供者ContentProvider的总结
本文包含以下知识点: ContentProvider Uri 的介绍 ContentResolver: 监听ContentProvider的数据改变 一:ContentProvider部分 Conte ...
- Uva 12627 Erratic Expansion(递归)
这道题大体意思是利用一种递归规则生成不同的气球,问在某两行之间有多少个红气球. 我拿到这个题,一开始想的是递归求解,但在如何递归求解的思路上我的方法是错误的.在研读了例题上给出的提示后豁然开朗(顺便吐 ...
- Centos7安装GUI桌面
2018-03-02 21:37:48 Centos7-1708成功 yum -y groupinstall "GNOME Desktop"
- jQuery - AJAX get()和post()方法
jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求数据. HTTP请求:GET VS POST 两种在客户端和服务器端进行请求-响应的常用方法是:GET和PO ...
- JavaScript选择打开手机网站还是电脑网站
现在手机网站越来越普遍,类似京东.淘宝.新浪等等大家都推出了wap版,一种简单的方法判断,JavaScript选择打开手机网站还是电脑网站,如果是手机网站就让网页跳转到手机网址.如果是电脑网站,打开电 ...
- poj 2965 The Pilots Brothers' refrigerator (dfs)
The Pilots Brothers' refrigerator Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17450 ...