HTML IE6 纯CSS 解决 position fixed 的问题

最新推荐文章于 2021-12-01 00:28:08 发布

最新推荐文章于 2021-12-01 00:28:08 发布 · 128 阅读

文章标签：

#IE6 纯CSS 解决 position fixed 的问题 #ie6解决position fixe #ie hack

境-HTML 专栏收录该内容

25 篇文章

订阅专栏

本文提供了一种解决Internet Explorer 6浏览器中position: fixed兼容性问题的方法。通过使用特定的CSS样式和表达式，使得元素能够在IE6中正确地实现固定定位效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.ie6fixed {border: 1px solid red; padding: 5px;}
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
.ie6fixedLT{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.ie6fixedRT{position:absolute;right:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
.ie6fixedLB{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
.ie6fixedRB{position:absolute;right:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}
html>body .ie6fixedLT{position:fixed;left:0;top:0}
html>body .ie6fixedRT{position:fixed;right:0;top:0}
html>body .ie6fixedLB{position:fixed;left:0;bottom:0}
html>body .ie6fixedRB{position:fixed;right:0;bottom:0}
</style>
</head>
<body>
<div class="ie6fixedLT ie6fixed">IE6完美兼容position:fixed1</div>
<div class="ie6fixedRT ie6fixed">IE6完美兼容position:fixed2</div>
<div class="ie6fixedLB ie6fixed">IE6完美兼容position:fixed3</div>
<div class="ie6fixedRB ie6fixed">IE6完美兼容position:fixed4</div>
<div style="height: 3000px;"></div>
</body>
</html>

效果图：