遮罩层IE8的兼容写法 CSS hack

最新推荐文章于 2024-04-21 18:16:20 发布

夕阳栖天角

最新推荐文章于 2024-04-21 18:16:20 发布

阅读量976

点赞数

本文链接：https://blog.csdn.net/xuesheng1610748/article/details/84033787

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

遮罩层IE8的兼容写法 CSS hack

- - 一、先看看IE8 CSS hack的基本用法
  - 二、遮罩层IE8的兼容写法

一、先看看IE8 CSS hack的基本用法

IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下：

div{
    color: orange;
    color:red\0;                    /* IE8+ css hack*/
    color:green\9;                  /* IE7、IE8、IE9、IE10*/
}

上面的 hack 同样对 IE9 和 IE10 起作用，那么如何仅仅只针对ie8来渲染呢?

解决思路：

1，首先用IE8hack；
2，其次用CSS3 之类的 IE8 不支持的选择器，来重新覆盖一遍。
符合条件的常用选择器有 :root，写法如下：

div{
     /*兼容IE8的css hack*/
     color:green\9;       /* IE7、IE8、IE9、IE10*/
}

/* IE8 不支持的CSS3的选择器:root，来重新覆盖一遍*/
:root div{
     color: orange; 
}

上述例子，只会在IE8下：字体显示绿色green，其他浏览器（IE9、IE10、IE11、chrome、firefox等）中字体都显示橘色orange。

二、遮罩层IE8的兼容写法

1、带遮罩层的弹框的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层IE8的兼容写法</title>
    <style>
        #container{
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1000;
        }

        /*遮罩层最开始是隐藏的*/
        .hide{
            display: none;
        }
        #container>div.content{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 300px;
            height: 150px;
            border: 1px #ddd solid;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <button id="btn">clickMe</button>

    <!--带遮罩层的弹框的实现-->
    <div id="container" class="hide">
        <div class="content">
            我是遮罩层中的div
        </div>
    </div>

</body>
</html>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("container").style.display = "block";
    }
</script>

效果图如下：
在这里插入图片描述
这样就实现了一个遮罩层，正常情况下button被遮罩层遮住是不能点击的，chrome中就无法点击，实现了遮罩的效果；
但是在ie8中，按钮还是可以点击的，是不起遮罩作用的。
在ie8中的效果图：

经测试，原因是此遮罩层无背景，下面的代码没起作用：

background: rgba(0, 0, 0, 0.4);

在ie8中无背景无法实现遮罩。所以解决方向是给该遮罩层添加背景：

添加透明背景色：
```
background: transparent;
```
经验证，无效。ie8中透明背景和无背景是一样的。
添加背景色
```
background: #DDD;
```
经验证，有效。但是从来没见过纯色遮罩层，很丑。
添加半透明的背景图片
问题是，ie8中对background-size属性也不支持，所以不好适应所有屏幕。
添加半透明背景色
- rgba
```
background: rgba(0, 0, 0, 0.4);
```
  从上面已经知道，chrome可实现半透明，但是，ie8不支持rgba。
- opacity
  ie8不支持opacity。
- opacity的滤镜
```
    background-color: #000\9;
    filter: alpha(opacity=40)\9;
```
  opacity的滤镜在ie8中可以起作用，chrome中不支持就使用rgba。
结合上面的解决思路：首先用IE8hack；其次用CSS3 之类的 IE8 不支持的选择器（:root），来重新覆盖一遍。最终的实现代码如下第2点。

2、兼容IE8的遮罩层实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层IE8的兼容写法</title>
    <style>
        #container{
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left: 0;

            /*兼容IE8的遮罩层*/
            background-color: #000\9;
            filter: alpha(opacity=40)\9;
        }
        /* IE8 不支持的CSS3的选择器:root，来重新覆盖一遍 */
        :root #container {
            background: rgba(0, 0, 0, 0.4);  /*chrome中的rgba半透明*/
            filter: alpha(opacity = 100);   /*此行代码是为了兼容IE9（可以去掉试试看，半透明效果不好）*/
            z-index: 1000;
        }

        /*遮罩层最开始是隐藏的*/
        .hide{
            display: none;
        }
        #container>div.content{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 300px;
            height: 150px;
            border: 1px #ddd solid;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <button id="btn">clickMe</button>

    <!--带遮罩层的弹框的实现-->
    <div id="container" class="hide">
        <div class="content">
            我是遮罩层中的div
        </div>
    </div>

</body>
</html>
<script>
    document.getElementById("btn").onclick = function () {
        document.getElementById("container").style.display = "block";
    }
</script>

参考文章：
仅仅 IE8 有效的 CSS hack 写法
https://www.cnblogs.com/wang715100018066/p/6386371.html
ie8兼容性问题(六) 遮罩层(absolute,fixed)
https://blog.csdn.net/qq_38627581/article/details/78038117

夕阳栖天角

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
遮罩层IE8的兼容写法 CSS hack

遮罩层IE8的兼容写法 CSS hack一、先看看IE8 CSS hack的基本用法二、遮罩层IE8的兼容写法一、先看看IE8 CSS hack的基本用法IE8 CSS hack 就是在属性后面加上 \9 或者 \0,代码如下：div{ color: orange; color:red\0; /* IE8+ css hack*/ ...
复制链接

扫一扫

专栏目录