IE兼容性小结（IE7及以上版本）
2018-06-24 02:15:55来源：未知 阅读 ()
缘由
在急速的互联网时代，原本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
总结
好了，这次就总结以上这五点兼容性问题，如果后续还有其他的，我也会更新在下面。好久没写技术博客了，虽然很多都是老调重弹，但望园友勿喷。
备注：文中如有错误之处，望各路大神指出，小弟定当虚心学习！
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：vue--初识
下一篇：Html和websocket初识
- css3文字特效和浏览器兼容性 2020-03-18
- 移动端常见问题（H5兼容性+JS兼容性+css3兼容性） 2020-03-17
- less使用小结 2020-02-29
- flex布局小结 2020-02-21
- 小结常见布局技巧 2020-01-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
