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

時間  2019-11-09
標籤 兼容性 小結 ie7 以上 版本 欄目 瀏覽器 简体版
原文   原文鏈接

原因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;}

<span class="btnbox"><input class="btn" type="button" value="按鈕"></span>

第二種辦法經過濾鏡

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

總結

好了，此次就總結以上這五點兼容性問題，若是後續還有其餘的，我也會更新在下面。很久沒寫技術博客了，雖然不少都是老調重彈，但望園友勿噴。

備註：文中若有錯誤之處，望各路大神指出，小弟定當虛心學習！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程