ie6 position:fixed解决方案

“ie6 position:fixed解决方案”是针对Internet Explorer 6浏览器下不支持CSS中position属性值为fixed的解决方法。该方案基于JavaScript实现，通过在网页加载时给需要固定位置的元素赋值一个绝对位置，并在浏览器滚动时不断调整元素位置，从而达到与position:fixed相似的效果。

下面是实现该方案的完整攻略：

1. 在标签内引入需要的JS文件

在HTML文件的标签内添加以下代码以引入所需的IE6Fixed.js文件：

<script src="IE6Fixed.js"></script>

2. 为需要固定位置的元素添加IE6Fixed类

将需要固定位置的元素的class属性设置为“IE6Fixed”，示例如下：

<div class="IE6Fixed">需要固定位置的元素</div>

3. 定义IE6Fixed.js文件

定义IE6Fixed.js文件，文件内添加以下代码：

//对于IE6，实现position:fixed的效果
if (navigator.userAgent.indexOf("MSIE 6.") != -1) {
    //获取需要固定位置的元素
    var el = document.getElementsByClassName('IE6Fixed');
    for (var i=0;i<el.length;i++){
        el[i].style.position = "absolute"; //将元素标记为绝对定位
        el[i].style.setExpression('top','document.documentElement.scrollTop || document.body.scrollTop + "px"'); //设置元素的垂直位置
        el[i].style.setExpression('left','document.documentElement.scrollLeft || document.body.scrollLeft + "px"'); //设置元素的水平位置
    }
}

以上代码会在页面加载时判断是否是IE6浏览器，如果是则获取所有带有IE6Fixed类的元素，并为元素设置绝对定位，并根据浏览器滚动条的位置调整元素的位置。

示例说明：

示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IE6 Fixed Position Demo</title>
    <script src="IE6Fixed.js"></script>
    <style type="text/css">
        .IE6Fixed{
            position:relative; /* 非IE6浏览器下的position属性值 */
            margin:20px;
            width:200px;
            height:200px;
            background-color:#f00;
            color:#fff;
            line-height:200px;
            text-align:center;
        }
    </style>
</head>
<body>

<div class="IE6Fixed">I am a fixed element in IE6!</div>

</body>
</html>

在IE6浏览器中打开该页面，会发现红色的容器元素会在滚动页面时始终保持在可视区域的固定位置。

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>IE6 Fixed Position Demo</title>
    <script src="IE6Fixed.js"></script>
    <style type="text/css">
        .IE6Fixed{
            position:relative; /* 非IE6浏览器下的position属性值 */
            margin:20px;
            width:200px;
            height:200px;
            background-color:#f00;
            color:#fff;
            line-height:200px;
            text-align:center;
        }
    </style>
</head>
<body>

<div class="IE6Fixed">I am a fixed element in IE6!</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae libero interdum enim ultrices congue. Vestibulum eu tellus enim. Donec semper erat sed ipsum egestas, nec eleifend dolor finibus. Donec feugiat hendrerit hendrerit. Proin dignissim in ipsum et faucibus. Sed feugiat tortor at facilisis blandit. Donec venenatis lacinia consectetur. Integer dapibus nunc eu tortor iaculis, eu lacinia libero convallis. Nulla nec ex posuere, sagittis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae libero interdum enim ultrices congue. Vestibulum eu tellus enim. Donec semper erat sed ipsum egestas, nec eleifend dolor finibus. Donec feugiat hendrerit hendrerit. Proin dignissim in ipsum et faucibus. Sed feugiat tortor at facilisis blandit. Donec venenatis lacinia consectetur. Integer dapibus nunc eu tortor iaculis, eu lacinia libero convallis. Nulla nec ex posuere, sagittis</p>
<div class="IE6Fixed">I am another fixed element in IE6!</div>

</body>
</html>

在IE6浏览器中打开该页面，会发现有两个红色的容器元素会在滚动页面时始终保持在可视区域的固定位置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ie6 position:fixed解决方案 - Python技术站