在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/
分享到:
相关推荐
` 这个属性实际上并没有起到实际的作用,但它可以触发IE6的一个内部修复机制,使得`fixed`定位开始生效。 - `_background-image:url(about:blank);` 这个是与上面的属性配合使用的,确保`background-attachment:...
资源中包含的`163css`文件可能包含了针对IE6的`fixed`定位修复代码,可能是通过引入名为`expression`的CSS属性或者使用条件注释来实现。`expression`是IE6特有的,可以将JavaScript表达式与CSS属性值关联,从而动态...
使用`position: fixed;`在IE6中无效,需要使用技巧如`expression`脚本或JavaScript替代。 6. CSS3新特性:IE6-8对CSS3的新特性如圆角(border-radius)、阴影(box-shadow)、渐变(gradients)和过渡(transitions...
项目中用的grunt-contrib-less, 写了以下less代码 ...注意底部两行是为了兼容IE6,即修复IE6的fixed。IE7+已经支持了。 执行less命令后,报错 开始以为是less不支持IE css hack,后发现是IE css
` 是专为IE6.0设置的,因为IE6不支持`fixed`定位,所以使用绝对定位作为替代。这将使得元素相对于最近的非静态定位祖先元素定位,如果没有这样的祖先,则相对于文档。 3. **表达式计算**:`_top:expression(eval...
如果一个元素在DOM结构中是由多个父元素包围,且这些父元素都有position属性,那么IE6可能只考虑最外层父元素的z-index。这种情况下,改变外部父元素的position属性为absolute或者调整内部父元素的z-index,都可以...
`position`属性用于控制元素在页面上的定位方式,常见的值有`static`(默认值,不进行特殊定位)、`relative`(相对定位,相对于其正常位置)、`absolute`(绝对定位,相对于最近的非`static`定位的祖先元素)和`...
1. IE的`position:fixed`在某些版本中存在bug,可能无法正确固定元素位置。 2. Firefox对`position:fixed`的支持较好。 八、单位支持 1. IE6不支持em和百分比单位,推荐使用像素。 2. Firefox支持em、百分比等...
3. 定位:IE6不支持`position:fixed`,开发者可能需要使用`position:absolute`和`expression`脚本来模拟固定定位。 4. CSS3新特性:如渐变、阴影、圆角等在IE5-8中不支持,可以使用专为IE提供的滤镜(如`progid:...
首先,IE6只对设置了`position`属性(如`position: relative;`, `absolute;` 或 `fixed;`)的元素应用`z-index`。如果一个元素的`position`为默认的`static`,那么即使设置了`z-index`,它也会被忽略。因此,要解决...
1. 使用条件注释或JavaScript检测:针对IE6,可以添加特定的CSS或JavaScript代码来修复`fixed`定位问题。例如,可以使用JavaScript库如jQuery来实现类似的效果,或者使用CSS hack来为IE6提供不同的样式。 2. 使用`...
在IE6浏览器中,由于其对CSS样式支持的局限性,`fixed`定位无法像在现代浏览器中那样正常工作,导致网页元素无法实现固定在屏幕某一位置的效果。然而,为了在IE6环境下模拟`fixed`定位,我们可以采用一些技巧和补丁...
1. **CSS兼容性问题**:IE6对CSS的支持并不完全,比如它不支持`position: fixed`,这使得在页面滚动时固定元素的位置变得困难。解决方案可以是使用`position: absolute`和JavaScript来模拟固定效果。另外,IE6也不...
【隐藏DOM元素的6种方法】:包括`display:none`、`visibility:hidden`、`opacity:0`、`height/width:0`、`position:absolute/fixed`外加`left/top:-9999px`,以及CSS3的`pointer-events:none`。 【浮动工作原理及...
/* 对IE6和7的样式修复 */ *position: fixed; _position: absolute; } ``` 然后,我们需要编写JavaScript来处理弹出和关闭菜单的行为。这通常涉及添加事件监听器,如点击某个按钮或链接来触发菜单的显示和隐藏。...
<th class="fixed-col">固定列 无效背景板 <td class="fixed-col">固定列 ``` #### 二、Edge 浏览器日历控件确认按钮需点击两次问题 ##### 问题描述 在 Edge 浏览器中使用 `nz-range-picker` ...
然而,对于老版本的浏览器,尤其是Internet Explorer 6 (IE6),它的CSS支持并不完善,不完全理解`position: fixed`。因此,在IE6中实现浮动广告通常需要采用其他方法,如使用`position: absolute`配合`expression`...
5. **IE6特有样式修复**:IE6对CSS的支持有限且存在一些已知的bug,比如盒模型问题。可能需要使用条件注释(`<!--[if IE 6]>...<![endif]-->`)来应用特定于IE6的CSS修复。 6. **jQuery或JavaScript库**:在2014年...
使用`hasLayout`的概念(一个内部的IE渲染机制),可以通过触发布局来修复这个问题。 4. **HTML和CSS的属性兼容性** 文档中提到了一些HTML和CSS属性的兼容性问题,如`width`, `height`, `zoom`, `min-width`, `min...
例如,使用`position: fixed`可以使元素相对于浏览器窗口定位,实现浮动效果,但IE6并不支持这一属性。此时,可以使用JavaScript或jQuery来动态计算并更新元素的位置,以模拟`position: fixed`的效果。 此外,考虑...