position:fixed 在ie8下的兼容性处理(附带ie8以下不透明度兼容)

最新推荐文章于 2022-11-29 16:57:33 发布

Mr_lee123

最新推荐文章于 2022-11-29 16:57:33 发布

阅读量2.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lihaofeifei/article/details/82771497

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、解决fixed兼容性核心代码：

.ie{
            _position: absolute;
            _clear: both;
            _top:expression(eval(document.compatMode &&
               document.compatMode=='CSS1Compat') ?
               documentElement.scrollTop
               +(documentElement.clientHeight-this.clientHeight) - 1
               : document.body.scrollTop
               +(document.body.clientHeight-this.clientHeight) - 1);
        }

原理：利用css表达式，将js代码插入到css中，但因expression存在较多的缺陷，目前已不提倡使用，可直接利用js控制。

2、解决不透明度兼容性核心代码：

            /*支持rgba的浏览器*/
            background: rgba(0,0,0,.5);
            /* older safari/Chrome browsers */
            -webkit-opacity: 0.5;
            /* Netscape and Older than Firefox 0.9 */
            -moz-opacity: 0.5;
            /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
            -khtml-opacity: 0.5;
            /* IE9 + etc...modern browsers */
            opacity: .5;
            /* IE 4-9 */
            filter:alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            /*IE4-IE9*/
            filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

完整demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed在ie下的兼容处理</title>
    <style>
        .ie{
            _position: absolute;
            _clear: both;
            _top:expression(eval(document.compatMode &&
               document.compatMode=='CSS1Compat') ?
               documentElement.scrollTop
               +(documentElement.clientHeight-this.clientHeight) - 1
               : document.body.scrollTop
               +(document.body.clientHeight-this.clientHeight) - 1);
        }
        .fixed{
            position: fixed;
            width: 200px;
            height: 200px;
            left:50%;
            top:0;
            background:#000;
            /*支持rgba的浏览器*/
            background: rgba(0,0,0,.5);
            /* older safari/Chrome browsers */
            -webkit-opacity: 0.5;
            /* Netscape and Older than Firefox 0.9 */
            -moz-opacity: 0.5;
            /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
            -khtml-opacity: 0.5;
            /* IE9 + etc...modern browsers */
            opacity: .5;
            /* IE 4-9 */
            filter:alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            /*IE4-IE9*/
            filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        }
        p{
            margin:50px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <p>测试行测试行测试行测试行测试行测试行</p>
    <div class="fixed ie"></div>
</body>
</html>

参考：https://www.cnblogs.com/muguaworld/archive/2011/11/13/2247180.html

Mr_lee123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position:fixed 在ie8下的兼容性处理(附带ie8以下不透明度兼容)

1、解决fixed兼容性核心代码：.ie{ _position: absolute; _clear: both; _top:expression(eval(document.compatMode &amp;&amp; document.compatMode=='CSS1Compat') ?...
复制链接

扫一扫

专栏目录