ie 兼容问题集合

最新推荐文章于 2024-04-03 16:40:46 发布

刃下心001

最新推荐文章于 2024-04-03 16:40:46 发布

阅读量212

点赞数

文章标签： ie兼容

本文链接：https://blog.csdn.net/dream19921216/article/details/82898669

版权

一、样式类兼容问题

1. calc()方法造成的未知错误

当calc()使用在内联样式中时，运算中任何值必须带上单位（百分比除外）

// 会用100% - 0 的原因是100%减去的是一个变量，只是默认值为0，但是此时省略单位在ie/edge上就会报错
<div :style="{height: calc(100% - 0)}"></div>

// 正确写法是无论什么值都带上单位
let top = '0px'
<div :style="{height: calc(100% - top)}"></div>

减去0时未带单位在ie/edge上回报如下错误

2. 定位div被object标签覆盖

出现这种现象的原因：

object标签不在dom文档流里面，浏览器在解析的时候先把object放置在最上层，然后依次解析dom文档，放在下层，并且在这里使用z-index是无效的。

处理方式如下图：

未处理之前自定义定位div的层级是比object的层级高的，但是在ie中通过z-index是无法使自定义定位div在object标签之上的，但是添加一个绝对定位的透明的iframe便签在定位div内即可处理此问题

// 定位div
<div style="position:absolute;top:0;left:0;width:100%;height:100%;">
     <iframe id="newiframe" src="" style="position: absolute; left: 0; top: 0; z-index:-1; width: 100%; height: 100%; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';" frameborder="0"></iframe>
</div>

3.ie9中获取元素的css3样式属性

以transform样式为例

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  </head>
  <body>
    <div id="test-box" style="-ms-transform: translate(10px,10px);transform: translate(10px, 10px)"></div>
    <script>
      var ele = document.getElementById("test-box")

      // 获取transform样式，为兼容ie9 必须用msTransform获取样式,样式中也必须添加前缀

      var transform = ele.style.transform || ele.style.msTransform

      // ele.style 只能获取内联样式，无法得到css中的样式，以下是获取标签css中样式的方法

      function getElementCss (ele, attr) {
         return window.getComputedStyle ? window.getComputedStyle(ele, false)[attr] :     ele.currentStyle[attr]
      }
   </script>
  </body>
</html>

刃下心001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ie 兼容问题集合

一、样式类兼容问题1. calc()方法造成的未知错误当calc()使用在内联样式中时，运算中任何值必须带上单位（百分比除外）// 会用100% - 0 的原因是100%减去的是一个变量，只是默认值为0，但是此时省略单位在ie/edge上就会报错&lt;div :style="{height: calc(100% - 0)}"&gt;&lt;/div&gt;// 正确写法是无论...
复制链接

扫一扫