緣由
在急速的互聯網時代，原本ie系列的低版本瀏覽器就該淘汰了。可偏偏還是有很多xp系統ie7、8瀏覽器，這有讓網站甚是苦逼。練就了一套新技術，原本以為能大展身手，可卻在ie陣容中認慫了，不得不規規矩矩的寫着老得掉牙的代碼，用着早已塵封的技術。
（注：因為用戶原因可能使用ie7，而非蛋疼要網站支持ie低版本）
既然無法說服不使用ie系列，那就乖乖讓網站支持ie7、8系列吧！坑爹的工作就這樣開始了，雖然覺得“蛋疼”、“操蛋”、“坑爹”...... 但還是硬着頭皮上，今天就來總結下這個過程中遇到的問題，做個小結。
1、placeholder 屬性
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，並會在字段獲得焦點時消失。
注釋：placeholder 屬性適用於以下的 <input> 類型：text, search, url, telephone, email 以及 password。
兼容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>
問題推進：
1、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
2、版本1.1加入了遍歷$elements.each(function (){});這是因為有些頁面初始化的時候需要為input加入初始值，原來的方法當判斷到第一個.ipt 類的文本時，就默認顯示所有span標簽，所以改為了遍歷每一個.ipt類再判斷是否顯示span標簽來模擬。
2、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的簡單應用，如果你對這個感興趣，也可以深入研究，畢竟技多不壓身。
3、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中沒有濾鏡功能，所以不能在這個軟件里測試效果
4、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))();
5、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
總結
好了，這次就總結以上這五點兼容性問題，如果后續還有其他的，我也會更新在下面。好久沒寫技術博客了，雖然很多都是老調重彈，但望園友勿噴。
備注：文中如有錯誤之處，望各路大神指出，小弟定當虛心學習！