在web开发中,经常需要将元素固定在某个位置,不随浏览器的拖动而改变。
这时候,你可能很快会想到使用position:fixed;方式去处理,不错这个方案是标准的,并且在ie6+,ff等浏览器中都能很好的渲染,但ie6却不支持此属性。
因ie6在目前的用户量仍然很大,我们必须将其考虑在内。
其实早些时候在网上已经涌现了一些解决方案,但归结如下:
1.监听滚动条的拖动,动态改变元素的位置。
2.利用ie所支持css中的expression,在里面写script去动态获取位置。
但是上面的两种方法都会造成元素的刷新,虽然第二种会好些,但仍然不是我们要的效果,在这里以上两种实现方法,不做细节讨论,主要给大家介绍一种方法:
1.如果是非ie6,那么利用position:fixed;方式。
2.如果是ie,通过将body元素高定位100%,并做一些处理。
下面是代码演示和下载:
http://www.scriptlover.com/controls/FixedPosition
from:http://www.scriptlover.com/
分享到:
相关推荐
微信小程序----position:sticky:通过position:fixed与position:relative切换。
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有...} ie6下positon:fixed不起作用,只能靠js来实现了,首先在ie6下需要将position设置为absolute 代码如下: position:fixed;bottom:60px;_po
IE7下当position:fixed遇到text-align:center 的一些状况,大家可以参考下。
position:fixed;实现底层页面不跟随浮层模块滚动
IE7已经支持position:fixed了,而我们的IE6呢?还继续使用js事件?消耗资源,破坏结构,画面闪耀。
#nav .n01 a:visited { background-position:0 -114px; } #nav .n01 a:hover { background-position:0 -38px; } #nav .n01 a:active { background-position:0 -76px; } #nav .n02 a:link { background-position:-...
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | ...
background-attachment:fixed;}/* IE6 头部固定 */html .fixed-top{position:absolute;bottom:auto;top:[removed]eval(document.documentElement.scrollTop));}/* IE6 右侧固定 */html .fixed-r
position:fixed在ie6的使用,hack的使用办法
border-bottom:1px solid #e6e6e6}.bdsug-ala h3{line-height:14px;background:url(//www.baidu.com/img/sug_bd.png) no-repeat left center;margin:6px 0 4px 0;font-size:12px;font-weight:normal;color:#7b7b7b;...
IE6的兼容性问题主要出现在position:fixed上面,如何解决已经在《【CSS】IE6中的position:fixed问题与随滚动条滚动的效果》(点击打开链接)介绍过了。 下面具体说说如何利用JavaScript中的滚动事件[removed]实现...
- New : Extra parameter added for grid.ScrollInView to define scroll position better - Improved : Handling of VCL styles - Fixed : Issue with Combobox inplace editor & grid OnKeyDown event - Fixed : ...
background-position:-22px -5px; } #face li#face2 { background-position:-104px -5px; } #face li#face3 { background-position:-185px -5px; } #face li#face4 { background-position:-265px -5px; }...
可是要在IE6中实现固定效果,position: fixed;就不奏效了。 目前我所知的ie6下fixed的方案大概有纯css和expression+js两种,各有利弊。 1.纯css法 利用了ie6下html元素外面套的一个匿名元素,即 * ,利用选择器层级...
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; ...
实现div居中的方法多如牛毛,本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中,这个小技巧比较使用,大家看看
" data-transform="rotate(-6deg)"><img alt="" src="images/thumbs/20.jpg" style="width: 115px; height: 115px; margin-top: 5px; margin-left: 5px;"> <div style="background-position: -250px -375px; left...
NULL 博文链接:https://piziwang.iteye.com/blog/424862
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之