每个 Web Developer / Designer 都知道 CSS 的 position:fixed 的妙用。利用这个属性,我们可以轻松的将一个元素“固定”在页面的某个位置。这在我们做一些特殊的效果,例如页边角的小角旗,或是固定页面底下的脚注都是非常有用的。但是万恶的 IE 却对这个属性支持有问题,尽管 IE7/8 已经能够正确处理这个属性,但 IE6 的份额还是很高,所以当我们用这个属性时,还得想办法解决这个问题。
今天在一位德国朋友的博客上,看到了一个不错的通用解决方案。这里我简单介绍,或者说翻译一下作者的方法:
在 Firefox/Opera 等良好支持 W3C 标准的浏览器中,如果我们希望将某个元素固定在页面底部,我们可以给它指派这样的 CSS:
position: fixed;
bottom: 0;
对于 IE7 来说,它虽然可以正确的将这个元素 fix 在底部,但它却错误的处理了水平方向的位置。对于这个问题,我们可以利用一个原有的 hack 来解决:
left: 50%;
margin-left: -390px;
这里 margin-left 的值应该修改为您页面主要区域宽度的一半。这样 IE7 下基本也就完美了。剩下需要解决的就是 IE6, IE5.5 的问题了,他们不懂得 position: fixed 属性,所以我们需要单独解决一下:
首先我们为这些浏览器单独创建一个样式表,我们可以利用条件注释语句,让 IE<7 的浏览器单独载入这个“多于”的样式表:
<!–[if IE lt 7]>
<link rel=”stylesheet” href=”path/to/stylesheet/ie-stuff.css” type=”text/css” media=”screen” />
<![endif]–>
然后我们在这个 CSS 文件中,对这个需要固定在页面底部的元素添加 CSS 属性:
postion: absolute;
bottom: auto;
top: expression( eval(document.compatMode && document.compatMode==’CSS1Compat’) ? documentElement.scrollTop + (documentElement.clientHeight - this.clientHeight) - 1 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) - 1);
这里事实上就是利用了 IE 中特有的 CSS 运算符 expression。在 expression 中我们可以利用 Javascript 计算出需要的 top 值,这样就达到了与 position: fixed 同样的效果。
这种方法原理上来说和以前的 Javascript 方案是相同的,但这种方法显然通用性更好一点。当然,如果您不介意用 Javascript 的话,实现同样的效果会更直观更简单一点。
分享到:
相关推荐
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
IE7已经支持position:fixed了,而我们的IE6呢?还继续使用js事件?消耗资源,破坏结构,画面闪耀。
position:fixed;实现底层页面不跟随浮层模块滚动
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...
IE7下当position:fixed遇到text-align:center 的一些状况,大家可以参考下。
position:fixed在ie6的使用,hack的使用办法
IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动;以下总结方法,在ie6,ie7,ie8上都调试成功,且页面滚动条滚动时,效果还挺好,div层并...
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
NULL 博文链接:https://piziwang.iteye.com/blog/424862
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...
完美解决IE6不支持position:fixed的bug,需要的朋友可以参考下。
position: fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果。但是,它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一个DEMO,涉及左侧、右侧。及上下两边,共四种位置的固定,与...
主要介绍了详解iOS中position:fixed吸底时的滑动出现抖动的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
非IE6下的写法大家一般都清楚如何写;...}/* IE6 头部固定 */html .fixed-top{position:absolute;bottom:auto;top:[removed]eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */html .fixed-r
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下