IE兼容性小结（IE7及以上版本）

时间 2019-11-09

原文原文链接

原因javascript

在急速的互联网时代，本来ie系列的低版本浏览器就该淘汰了。可恰恰仍是有不少xp系统ie七、8浏览器，这有让网站甚是苦逼。练就了一套新技术，本来觉得能大展身手，可却在ie阵容中认怂了，不得不规规矩矩的写着老得掉牙的代码，用着早已尘封的技术。html

（注：由于用户缘由可能使用ie7，而非蛋疼要网站支持ie低版本）java

既然没法说服不使用ie系列，那就乖乖让网站支持ie七、8系列吧！坑爹的工做就这样开始了，虽然以为“蛋疼”、“操蛋”、“坑爹”...... 但仍是硬着头皮上，今天就来总结下这个过程当中遇到的问题，作个小结。json

一、placeholder 属性浏览器

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。app

该提示会在输入字段为空时显示，并会在字段得到焦点时消失。echarts

注释：placeholder 属性适用于如下的 <input> 类型：text, search, url, telephone, email 以及 password。ide

兼容ie浏览器的placeholder的几种方法详见如下连接函数

https://www.cnblogs.com/maxiaodan/p/5337213.html学习

连接中已经提到，placeholder主要是不兼容ie10-如下的版本，因此当用户使用的是ie10-如下的浏览器的时候，咱们就会使用一个span标签来模拟提示。

那下面就用js判断浏览器版原本实现。（这里我对文中的第二种方法作了些修改，由于在使用中发现了一些问题）

废话很少说，直接上代码。

原来版本1.0

<script  type="text/javascript">
    $(function(){
        function placeholder(target){
            var browser=navigator.appName
            var b_version=navigator.appVersion       
            var version=b_version.split(";");
            var trim_Version=version[1].replace(/[ ]/g,"");
            if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0")
            {
                $(target).siblings("span").show();
                $(target).focus(function() {
                    $(this).siblings("span").hide();
                })
                $(target).blur(function(){
                    if($(this).val() == "") {
                       $(this).siblings("span").show();
                    }
                })
            }
        }
        placeholder(".ipt")
})
</script>

版本1.1

function placeholder(target) {
    var browser = navigator.appName
    var b_version = navigator.appVersion
    var version = b_version.split(";");
    var trim_Version = version[1].replace(/[ ]/g, "");   
    if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0" || browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0" || browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
        var $elements = $(target);
        $elements.each(function () {
            var $this = $(this);
            //alert($this.val());
            if ($this.val() == "") {
                $this.siblings("span").show();
            }
            $this.focus(function () {
                $this.siblings("span").hide();
            })
            $this.blur(function () {
                if ($this.val() == "") {
                    $this.siblings("span").show();
                }
            })
        });
    }
}
window.onload = function () {
	placeholder(".ipt");
}

.spn {position: absolute;font-size: 14px;left: 112px;top: 12px;display: none;color:#666;}

<div class="name" style="width: 338px;">
　　<div class="reg-tit">邮箱验证码</div>
   <input class="ipt" type="text" id="TextEmailYZCode" maxlength="6" runat="server" placeholder="邮箱验证码" autocomplete="off" style="width: 105px;" />
   <span class="spn">邮箱验证码</span>
   <input type="button" id="id_sendemail" value="获取邮箱验证码" class="hqyzm" style="width: 116px;" />
</div>
<div class="Err_MsgBottom" id="id_emailyzcode"></div>

问题推动：

一、jq的$(function(){})与window.onload的区别

（1）$(function(){})不会被覆盖，而window.onload会被覆盖，我的感受$(function(){})不会被覆盖的缘由是将其放入到了一个队列中，在对应时机一次出队。

（2）$(function(){})在window.onload执行前执行的，$(function(){})相似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面所有内容（如图片等）彻底加载完毕前被执行。而window.onload会在页面资源所有加载完毕后才会执行。

DOM文档加载步骤：

1.解析HTML结构

2.加载外部的脚本和样式文件

3.解析并执行脚本代码

4.执行$(function(){})内对应代码

5.加载图片等二进制资源

6.页面加载完毕，执行window.onload

二、版本1.1加入了遍历$elements.each(function (){});这是由于有些页面初始化的时候须要为input加入初始值，原来的方法当判断到第一个.ipt 类的文本时，就默认显示全部span标签，因此改成了遍历每个.ipt类再判断是否显示span标签来模拟。

二、CSS hack

http://blog.csdn.net/freshlover/article/details/12132801

至于什么是CSS hack这里就很少加介绍了，上面连接的文章已经说的很清楚了，这里就总结本次开发中使用到的知识。

Style="*height: 22px; *margin-top: 11px; height: 22px\0; margin-top: 11px\0;"

height前面加*是为了让ie7识别；

22px后面加\0是为了让ie8识别。

这里只是对CSS hack的简单应用，若是你对这个感兴趣，也能够深刻研究，毕竟技多不压身。

三、input，button制做按钮IE6，IE7点击时1px黑边框

按钮在IE6中点击时1px黑边框的最多见的解决方法

首先设置按钮为none，而后在按钮外面套一层来实现边框的效果，部分代码以下

.btnbox{ border:solid 1px red;}

.btn{ border:none;}

第二种办法经过滤镜

input { filter:chroma(color=#000000); }

注：由于ietest中没有滤镜功能，因此不能在这个软件里测试效果

四、IE6 IE7 IE8(Q) 不支持JSON.parse()

JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回以前对所获得的对象执行变换(操做)。

问题：使用了 JSON 对象的脚本代码在 IE6 IE7 IE8(Q) 中运行的时候可能会抛出异常，致使功能失效。

解决：使用eval和new Function方式代替json.parse

//使用两种简单的方式解析 JSON 格式字符串

json1 = eval("(" + jsonStr + ")")

json2 = (new Function("return " + jsonStr))();

五、ECharts兼容ie9如下浏览器

ECharts 饼图在ie9如下都不显示，本来都准备放弃该饼图显示数据了，可后来发现ECharts4.0版本支持ie8，因此又从新浏览了官网的说明，最终更新了js库，确保了ie7及以上版本支持。

（注：本来是另外一个同事直接引用的，没考虑兼容性也没在ie系列中测试，因此差点放弃）

这里我使用了4.0.2版本，直接在官网下载了经常使用这个js库，并引用。

代码以下：

<script src="../Scripts/echarts.common.min.js"></script>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('piezc'));

    var DSBJ = parseFloat($("#id_DSBJ").val()).toFixed(2);

    var KYYE = parseFloat($("#id_KYYE").val()).toFixed(2);

    var DJZJ = parseFloat($("#id_DJZJ").val()).toFixed(2);

    option = {

        tooltip: {

            trigger: 'item',

            formatter: "{a} <br/>{b}: {c} ({d}%)"

        },

        color: ['#f1584d', '#99cc99', '#60aff1'],

        legend: {

            orient: 'vertical',

            x: 'left',

            data: ['待收本金', '可用余额', '冻结金额']

        },

        series: [

            {

                name: '资金分布',

                type: 'pie',

                radius: ['50%', '80%'],

                avoidLabelOverlap: false,

                center: [300, 130],

                label: {

                    normal: {

                        show: false,

                        position: 'center'

                    },

                    emphasis: {

                        show: true,

                        textStyle: {

                            fontSize: '20',

                            fontWeight: 'bold'

                        },

                        formatter: "{b}\n{c}"

                    }

                },

                labelLine: {

                    normal: {

                        show: false

                    }

                },

                data: [

                    { value: DSBJ, name: '待收本金' },

                    { value: KYYE, name: '可用余额' },

                    { value: DJZJ, name: '冻结金额' }

                ]

            }

        ]
};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

<div id="piezc" style="width: 480px; height: 260px; margin: 20px;"></div>

这里只是贴出了我使用的饼图图表，其实ECharts有不少各类类型好用的图表，有兴趣的朋友能够深刻研究。

ECharts官网连接：http://echarts.baidu.com/download.html

总结

好了，此次就总结以上这五点兼容性问题，若是后续还有其余的，我也会更新在下面。很久没写技术博客了，虽然不少都是老调重弹，但望园友勿喷。

备注：文中若有错误之处，望各路大神指出，小弟定当虚心学习！