当前位置: 代码迷 >> 综合 >> ie8兼容性问题(六) 遮罩层(absolute,fixed)
  详细解决方案

ie8兼容性问题(六) 遮罩层(absolute,fixed)

热度:31   发布时间:2023-12-24 06:40:07.0

带遮罩层的弹框的实现(absolute和fixed同理,以下代码用fixed举例)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#container {
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
}
#container>div {
margin-left: 300px;
margin-top: 200px;
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<button id="btn">点我按钮</button>
<div id="container">
<div>我是遮罩层中的div</div>
</div>
<script>
document.getElementById("btn").onclick = function() {
alert("aaa");
}
</script>
</body>
</html>

这样的话会实现一个遮罩层,正常情况下button被遮罩层遮住是不能点击的,chrome中就无法点击,实现了遮罩的效果,但是在ie8中,按钮还是可以点击的,是不起遮罩作用的。
经过测试,原因是此遮罩层无背景,在ie8中无背景无法实现遮罩。所以解决方向是给该遮罩层添加背景。

  • 添加透明背景色
    background: transparent;
    经验证,无效。ie8中透明背景和无背景是一样的。。。

  • 添加背景色
    background: #DDD;
    经验证,有效。但是从来没见过纯色遮罩层,很丑。。。

  • 添加半透明的背景图片
    这样的问题是,ie8中对background-size属性也不支持,所以不好适应所有屏幕。

  • 添加半透明背景色

    • rgba
      background: rgba(0, 0, 0, 0.4);
      chrome可实现半透明,but,ie8不支持rgba。。。那好吧,滤镜,用渐变色的滤镜模拟半透明吧
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
      事实证明,并没什么用,还是代替不了背景。。。
    • opacity
      上面半透明无法实现,那就用opacity吧。ie8不支持,还是滤镜
      background: #000;
      opacity: 0.4;
      filter:alpha(opacity=10);

      这样的话,遮罩层中的所有子元素都半透明了,经测试,ie8中的滤镜opacity,如果遮罩层中的子元素绝对定位的话就不受父元素的影响了。chrome中不行可以用rgba
      所以这样的额。
      <!DOCTYPE html>
      <html>
      <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
      #container {
      position: fixed;
      top:0;
      left:0;
      bottom:0;
      right:0;
      background: rgba(0,0,0,0.4);
      }
      #container>div {
      position: absolute;
      width: 300px;
      height: 150px;
      top: 35%;
      left: 35%;
      color: #000;
      background: green;
      font-weight: bold;
      font-size: 22px;
      }
      </style>
      <!--[if lte IE 8]>
      <style>
      #container {
      background: #000;
      filter:alpha(opacity=40);
      }
      </style>
      <![endif]-->
      </head>
      <body>
      <button id="btn">点我按钮</button>
      <div id="container">
      <div>我是遮罩层中的div</div>
      </div>
      <script>
      document.getElementById("btn").onclick = function() {
      alert("aaa");
      }
      </script>
      </body>
      </html>

大家如果有什么好的方法,欢迎留言~~

  相关解决方案