- 浏览: 166672 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
crabboy:
goodhttp://veerle.duoh.com/comm ...
表格效果 -
lunvsxiao:
好呀,省的自己记那么多了。。
java常用正则表达式
你是如何让position:fixed在IE6中工作的?
本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval
包裹你的语句。
如何解决“振动”的问题?
显然IE有一个多步的渲染进程。当你滚动或调整你的浏览器大小的时候,它将重置所有内容并重画页面,这个时候它就会重新处理css表达式。这会引起一个丑陋的“振动”bug,在此处固定位置的元素需要调整以跟上你的(页面的)滚动,于是就会“跳动”。
解决此问题的技巧就是使用background-attachment:fixed
为body或html元素添加一个background-image。这就会强制页面在重画之前先处理CSS。因为是在重画之前处理CSS,它也就会同样在重画之前首先处理你的CSS表达式。这将让你实现完美的平滑的固定位置元素!
这个方案并不是我提供的。我是在网上的某个地方读到这些的。如果你知道是谁原创了这个方法,请告诉前端观察。
我发现的另外一个小技巧是,你根本无需一个真实的图片!你可以使用一个about:blank
替代一个spacer.gif图片,而且它工作的同样出色。
让position:fixed在IE6下可用!
.fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
.fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
.fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
.fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
/* 上面的是除了IE6的主流浏览器通用的方法 */
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
* html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
* html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
* html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
发表评论
-
img 图片显示多余空白解决方法
2014-09-03 23:01 0img 图片显示多余空白解决方法:在进行DIV+CSS排版时 ... -
js event.keyCode
2011-12-02 17:13 675keycode 8 = BackSpace BackSpace ... -
js event.keyCode
2011-12-02 17:06 2keycode 8 = BackSpace BackSpace ... -
IE6下png透明处理心得
2011-11-24 12:41 1266首先说明一下,网上处理IE6下png透明的方法有很多,但无外乎 ... -
我的笔记
2011-10-25 22:52 0http://www.ccxcn.com/blog/post/ ... -
HTTP状态码(HTTP Status Code)
2011-02-23 09:40 6851xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代 ... -
上传图片预览-兼容IE6,IE7,IE8,FF
2011-01-20 14:07 690<!DOCTYPE html PUBLIC " ... -
动态加载javascript文件
2010-12-23 23:53 688动态加载javascript?很俗的一个题目,如果你已经知道如 ... -
Apache相关配置
2010-11-30 22:15 707强制IE缓存CSS中定义的图片 document.execC ... -
表格效果
2010-07-14 18:07 758web应用中的表格效果。 鼠标滑动时选中横行和竖列。 见附 ... -
所有浏览器中都能正常显示的字体
2010-07-04 01:31 930很佩服国外一些前端开发人员对待学问的研究精神,他们很善于总结发 ... -
隐藏IE窗口自带的“Windows Internet Explorer”
2010-05-17 10:34 1680var whiteStr = ""; f ... -
当加载flash或者弹出窗口时,Internet Explorer显示安全提示
2010-05-05 11:50 1889当我们在开发web前端时,有时加载的swf文件或者某些js文件 ... -
子页面和父页面的相互调用
2010-04-07 13:53 2428父页面 <!DOCTYPE html PUBLI ... -
CSS选择器笔记
2010-03-20 11:17 1382http://www.456bereastreet.com/a ... -
美化表单
2010-01-14 22:42 1257首先介绍一个设计很不错的网站:http://utombox.c ... -
动态加载css的实现思路
2010-01-04 15:50 1420动态加载css的实现思路,目前想到有两种: 一、js 主要 ... -
滚动列表
2010-01-04 13:13 1084<MARQUEE onmouseover=this.st ... -
淡入淡出DIV层效果
2009-12-29 18:09 2064<html> <head> &l ... -
生成Table,然后赋值
2009-12-23 10:42 1375主要用于需要对比的时候: <!DOCTYPE H ...
相关推荐
position:fixed在ie6的使用,hack的使用办法
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...
现在网上的回到顶部组件,懂不懂就一大段让人看不懂javascript代码,还各种不兼容。起始这个组件,完全可以自己利用javascript的滚动事件[removed]与...IE6: IE8: FireFox: 首先是HTML+CSS的布局,在页面
IE7已经支持position:fixed了,而我们的IE6呢?还继续使用js事件?消耗资源,破坏结构,画面闪耀。
NULL 博文链接:https://piziwang.iteye.com/blog/424862
非IE6下的写法大家一般都清楚如何写;...}/* IE6 头部固定 */html .fixed-top{position:absolute;bottom:auto;top:[removed]eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */html .fixed-r
及上下两边,共四种位置的固定,与以往的教程不同的地方是,它使用CSS表达式来兼容IE5、IE6,且避免了js模拟时,拖动滚动条时出现抖动的问题,另外在IE5或者怪癖模式下也完全正常,没有任何问题。如果你有更好的方案...
可是要在IE6中实现固定效果,position: fixed;就不奏效了。 目前我所知的ie6下fixed的方案大概有纯css和expression+js两种,各有利弊。 1.纯css法 利用了ie6下html元素外面套的一个匿名元素,即 * ,利用选择器层级...
页面如图:divA是一个悬浮磁条,固定...less代码:除chrome浏览器以外,IE8+和其它浏览器效果正常(当然IE6,7也有问题)。chrome下如图:A-child无法覆盖B元素。后来发现是chrome22+以后的一个改动,参考链接:Thestacki
position_fixed 完美兼容IE6
ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并...
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!--[if IE 6]> <style type...
IE7下当position:fixed遇到text-align:center 的一些状况,大家可以参考下。
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>
IE6 position:fixed bug</title> <style> *{padding:0;margin:0} p{height:2000px} #gs{border:1px solid #000;position:fixed;right:30px;top:120px} </style> <!–[if IE 6]>