IE 兼容性

Published: 14 Jun 2017 Category: web

浏览器分两种,一种是IE,一种是其他浏览器。

在开发中,经常遇到浏览器兼容性问题,而这些问题几乎都和IE有关。本来是一段非常简洁高效的代码,可就为了兼容『高贵的』IE,要变得又丑又长。作为浏览器界拖后腿的存在,IE算是很成功的。

本文记录一些坑,以及填坑方式。

1. IE低版本(<=8)不兼容 JSON.parse

IE8及以下的内核不支持通过JSON.parse将字符串转换成JSON对象,下面是替代方法:

  1. eval方式解析,恐怕这是最早的解析方式了

    function strToJson(str){ var json = eval(‘(‘ + str + ‘)’); return json; }

  2. new Function形式,比较怪异。如下

    function strToJson(str){ var json = (new Function(“return “ + str))(); return json; }

2. 低版本出现getElementById()获取对象为undefined的问题

原因在于网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况。

为了避免这种情况的发生,可以使用以下两种方式:

  1. 将脚本代码放在网页的底端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。
  2. 通过window.onload来执行脚本代码。

建议用第二种方式。 示例代码:

<script type="text/javascript">
    window.onload=function(){
      document.getElementById("bg").style.backgroundColor="#F90";
    }
</script>

3. 强制使用某种模式去解析网页代码 (待亲测)

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″> //或 IE=7
<meta http-equiv=“X-UA-Compatible” content=“IE=8″> // 强制使用IE8模式

4. CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

请移步 »>Click«<

.transparent_class {
    /* Required for IE 5, 6, 7 */
    /* ...or something to trigger hasLayout, like zoom: 1; */
    width:300px;
    height:300px;
    line-height:300px;
    text-align:center;
    background:#000;
    color:#fff;
    /* 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);
}

4. CSS !important

important

如果格式改的不正确,请重新正确地、认真地、走心地认识CSS的优先级规则:

CSS 优先级法则:

A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大;

优先链:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

  1. 内联样式表的权值最高 1000;
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

举例:

    <head>
        <style type="text/css">
            /* 内部样式 */
            h3{
                color:green;
            }

            #redP p {
                /* 权值 = 100+1=101 */
                color:#F00;  /* 红色 */
            }
     
            #redP .red em {
                 /* 权值 = 100+10+1=111 */
                 color:#00F; /* 蓝色 */
            }
     
            #redP p span em {
                 /* 权值 = 100+1+1+1=103 */
                 color:#FF0;/*黄色*/
            }
        </style>
     
        <!-- 外部样式 style.css -->
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!-- 设置:h3{color:blue;} -->
    </head>
    <body>
        <!-- 内联样式 -->
        <h3 style="color:red">测试!</h3>

        <div id="redP">
        <p class="red">red
           <span><em>em red</em></span> 
        </p>
        <p>red</p>
     </div>
    </body>

结果:

<em> 标签内的数据显示为蓝色。其余均为红色。