关键词：
缘由
在急速的互联网时代，原本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
总结
好了，这次就总结以上这五点兼容性问题，如果后续还有其他的，我也会更新在下面。好久没写技术博客了，虽然很多都是老调重弹，但望园友勿喷。
备注：文中如有错误之处，望各路大神指出，小弟定当虚心学习！
兼容低版本ie的思路
...要思考的问题点，这里总结几个常见的：1、-区分ie6与ie7以上（-text-indent:0; ie6识别）2、*区分标准ie7与ie8以上标准模式（*text-indent:0;ie7识别 ）3、 查看详情
百度的富文本编辑器ueditor兼容问题
...了,如下图所示:做项目很需要这样的编辑器,可又得考虑到兼容性,这怎么办?Ueditor1.4.3以上版本将不再承诺支持ie6/ie7，如果一定要支持IE6/7所以只好下载1.4.2版本试一下了。追问可我用的就是1.4.2的追答那就再找更旧的版本试一下。... 查看详情
ajax兼容性问题
对于IE7及以上直接使用XMLHttpRequest就行，但对于过老版本IE建议直接提示用户下载新版浏览器更佳。或者用以下代码兼容IE6：functionCreateXHR(){if(XMLHttpRequest){returnnewXMLHttpRequest;}else{returnnewActiveXObject("Msxml2.XMLHTTP");//兼容老IE浏览器}}var... 查看详情
用 IE7 编辑占位符属性
...无法使用IE7编辑该属性。我知道该属性不适用于IE9及以下版本，但我正在使用插件使IE9及以下版本兼容。//Console.logdisplaythevalueo 查看详情
html和css在ie7中常见的兼容性问题
IE7及以下版本都会有这些问题1.IE7块转内联块问题 问题描述：好像块转内联块失败，依然不在一行排列 解决办法：给元素添加如下css *display:inline;*zoom:1; *display:inline;先把元素转成内联，再用*zoom:1;触发盒子有... 查看详情
css兼容性记录
* ， ie6,ie7可以识别； _和- ， ie6可以识别； !important ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；-webkit 查看详情
关于jquery版本与兼容ie7,ie8的一些问题
jquery版本很多，当初我这小白以为版本越高越好，后来在写页面时要兼容到ie7,8时，才发现遇到一些问题。我觉得要兼容ie7,8尽量不要用jq3+,用jq1+就好了。我的页面有用到bootstrap页签，在引入jq1-7-1,会报错：Bootstrap‘sJavaScriptrequire... 查看详情
xhr
...XMLHttpRequest对象与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XML... 查看详情
前端ie7的兼容问题及解决方案（未完待续）
最近在维护一些老的项目，需要兼容ie7，css3就不能用了，这里总结一下碰到的问题及解决方案。1、盒模型 ie7、8 的盒模型都是box-sizing为content-box的盒模型，这里在做的时候就要注意2、display：inline-block 碰到使用... 查看详情
2020年如何清除浮动？还在使用老的方式？clearfix?(代码片段)
...到任何需要清除浮动的父级元素即可，这行代码兼容IE8及以上，目前国内不少大网站也在采取这种做法。.group:aftercontent:"";display:table;clear:both;提示:现在2020年，除了IE8需要兼容以外，很少项目会去兼容IE6和IE7了,而上面这... 查看详情
ie兼容性问题
1.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度2.ie7的浮动问题其问题症状:其他版本用display:inline-block,ie7要用*display:inline... 查看详情
csshacker使用小结(兼容ie678)
什么是CSShack由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需... 查看详情
xhr——xmlhttprequest对象
...XMLHttpRequest对象与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XML... 查看详情
兼容性测试
网页兼容性测试工具：1.IETester 2.Multibrowser 判断IE版本的方法：1.条件判断格式<?--[if条件版本]>那么显示<![endif]--> 2.不等于：[if!IE8] 除了IE8都可以显示3.小于：[ifltIE5... 查看详情
浏览器兼容问题——ie7/ie/8下背景图片不显示
...度的优良传统，找了N久的答案，终于。。。 没错！以上就是正确答案，什么没区别？你仔细瞧瞧背景图地址后面连写的那一句那~要多一个空格！！！（当然看到答案真的J8都气大） 解决后... 查看详情
即使使用 X-UA 元标记，IE9 也会进入 IE7 兼容性视图
】即使使用X-UA元标记，IE9也会进入IE7兼容性视图【英文标题】：IE9goingintoIE7compatibilityviewevenwithX-UAmetatag【发布时间】：2015-08-1102:51:21【问题描述】：所以根据标题，我使用X-UA-Compatible元标记来强制当前IE版本中的标准模式。（以... 查看详情
在ie7中overflow:hidden失效问题及解决方案
css兼容ie7：做页面的时候用负边距居中的时候在IE7下面，父节点中的overflow:hiden失效的问题，查阅了一些资料，总结一下解决方法。问题原因：当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时，父元素的overf... 查看详情
怎么用csshack处理各浏览器兼容ie6，ie7,ie8,ie9/ff
第一：什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网... 查看详情