所有分类
  • 所有分类
  • 后端开发
IE6浏览器position:fixed固定定位问题

IE6浏览器position:fixed固定定位问题

运行环境:Windows
所需软件:Word
资源类型:简历

关于 position:fixed;属性

与浏览器窗口相比,生成绝对定位元素。
通过元素的位置 “left”, “top”, “right” 以及 “bottom” 规定属性。

position:fixed; 即使拉动滚动条的位置,也可以将网页上的某个元素固定在绝对位置。(在 LOO2K 博客右下角的顶部按钮使用了这个 CSS 实现属性的)

一般的 position:fixed;实现方法

以我的博客为例,在右下角<div id="top">...</div>这个 HTML 元素使用的 CSS 代码如下:

#top{position:fixed;bottom:0;right:20px;}

实现让<div id="top">...</div>元素固定在浏览器底部和右侧的20个像素。

在 IE6 中实现 position:fixed;的办法

刚刚提过,在 IE6 不能直接使用 position:fixed; 。你需要一些 CSS Hack 解决它。(当然,IE6 不仅仅是问题 position:fixed;)

同样的还是让 <div id="top">...</div> 元素固定在浏览器底部和右侧的20个像素上,这个代码是:

#top{position:fixed;_position:absolute;bottom:0;right:20px;_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));}

right 跟 left 属性可以通过绝对定位来解决, top 跟 bottom 需要使用上述表达式来实现。其中在_position:absolute;中的_符号只有 IE6 才能识别,目的是区分其他浏览器

以上只是一个例子,以下是最重要的代码片段:

将元素固定在浏览器顶部

#top{_position:absolute;_bottom:auto;_top:expression

(eval(document.documentElement.scrollTop));}

将元素固定在浏览器底部

#top{_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));}

这两个代码只能在底部和顶部实现,你可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改数值控制元素的位置。

position:fixed;闪动问题

现在,问题还没有完全解决。使用上述方法后,您会发现:固定定位元素在滚动滚动条时会闪烁。解决闪光问题的办法是 CSS 添加到文件中:

*html{background-image:url(about:blank);background-attachment:fixed;}

其中 * 是给 IE6 识别的。

到此,IE6 的 position:fixed; 问题已经解决了。

原文链接:https://www.icz.com/technicalinformation/web/html/2023/05/8828.html,转载请注明出处~~~
0
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?