缘由

在急速的互联网时代,原本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

  1. <script type="text/javascript">
  2. $(function(){
  3. function placeholder(target){
  4. var browser=navigator.appName
  5. var b_version=navigator.appVersion
  6. var version=b_version.split(";");
  7. var trim_Version=version[1].replace(/[ ]/g,"");
  8. 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")
  9. {
  10. $(target).siblings("span").show();
  11. $(target).focus(function() {
  12. $(this).siblings("span").hide();
  13. })
  14. $(target).blur(function(){
  15. if($(this).val() == "") {
  16. $(this).siblings("span").show();
  17. }
  18. })
  19. }
  20. }
  21. placeholder(".ipt")
  22. })
  23. </script> 

版本1.1

  1. function placeholder(target) {
  2. var browser = navigator.appName
  3. var b_version = navigator.appVersion
  4. var version = b_version.split(";");
  5. var trim_Version = version[1].replace(/[ ]/g, "");
  6. 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") {
  7. var $elements = $(target);
  8. $elements.each(function () {
  9. var $this = $(this);
  10. //alert($this.val());
  11. if ($this.val() == "") {
  12. $this.siblings("span").show();
  13. }
  14. $this.focus(function () {
  15. $this.siblings("span").hide();
  16. })
  17. $this.blur(function () {
  18. if ($this.val() == "") {
  19. $this.siblings("span").show();
  20. }
  21. })
  22. });
  23. }
  24. }
  25. window.onload = function () {
  26. placeholder(".ipt");
  27. }
  1. .spn {position: absolute;font-size: 14px;left: 112px;top: 12px;display: none;color:#666;}
  2.  
  3. <div class="name" style="width: 338px;">
  4.   <div class="reg-tit">邮箱验证码</div>
  5. <input class="ipt" type="text" id="TextEmailYZCode" maxlength="6" runat="server" placeholder="邮箱验证码" autocomplete="off" style="width: 105px;" />
  6. <span class="spn">邮箱验证码</span>
  7. <input type="button" id="id_sendemail" value="获取邮箱验证码" class="hqyzm" style="width: 116px;" />
  8. </div>
  9. <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库,并引用。

代码如下:

  1. <script src="../Scripts/echarts.common.min.js"></script>
  2.  
  3. <script type="text/javascript">
  4.  
  5. var myChart = echarts.init(document.getElementById('piezc'));
  6.  
  7. var DSBJ = parseFloat($("#id_DSBJ").val()).toFixed(2);
  8.  
  9. var KYYE = parseFloat($("#id_KYYE").val()).toFixed(2);
  10.  
  11. var DJZJ = parseFloat($("#id_DJZJ").val()).toFixed(2);
  12.  
  13. option = {
  14.  
  15. tooltip: {
  16.  
  17. trigger: 'item',
  18.  
  19. formatter: "{a} <br/>{b}: {c} ({d}%)"
  20.  
  21. },
  22.  
  23. color: ['#f1584d', '#99cc99', '#60aff1'],
  24.  
  25. legend: {
  26.  
  27. orient: 'vertical',
  28.  
  29. x: 'left',
  30.  
  31. data: ['待收本金', '可用余额', '冻结金额']
  32.  
  33. },
  34.  
  35. series: [
  36.  
  37. {
  38.  
  39. name: '资金分布',
  40.  
  41. type: 'pie',
  42.  
  43. radius: ['50%', '80%'],
  44.  
  45. avoidLabelOverlap: false,
  46.  
  47. center: [300, 130],
  48.  
  49. label: {
  50.  
  51. normal: {
  52.  
  53. show: false,
  54.  
  55. position: 'center'
  56.  
  57. },
  58.  
  59. emphasis: {
  60.  
  61. show: true,
  62.  
  63. textStyle: {
  64.  
  65. fontSize: '20',
  66.  
  67. fontWeight: 'bold'
  68.  
  69. },
  70.  
  71. formatter: "{b}\n{c}"
  72.  
  73. }
  74.  
  75. },
  76.  
  77. labelLine: {
  78.  
  79. normal: {
  80.  
  81. show: false
  82.  
  83. }
  84.  
  85. },
  86.  
  87. data: [
  88.  
  89. { value: DSBJ, name: '待收本金' },
  90.  
  91. { value: KYYE, name: '可用余额' },
  92.  
  93. { value: DJZJ, name: '冻结金额' }
  94.  
  95. ]
  96.  
  97. }
  98.  
  99. ]
  100. };
  101.  
  102. // 使用刚指定的配置项和数据显示图表。
  103.  
  104. myChart.setOption(option);
  105.  
  106. </script>
  1. <div id="piezc" style="width: 480px; height: 260px; margin: 20px;"></div>

这里只是贴出了我使用的饼图图表,其实ECharts有很多各种类型好用的图表,有兴趣的朋友可以深入研究。

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

总结

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

备注:文中如有错误之处,望各路大神指出,小弟定当虚心学习!

 

IE兼容性小结(IE7及以上版本)的更多相关文章

  1. IE对象最后一个属性后不要加逗号,否则在IE7及以下版本中会报错

    某函数返回一个对象,如果在最后一个属性后加逗号,IE7及以下版本中会报错 正确代码: return{ top:rect.top-top, bottom:rect.bottom-top, left:re ...

  2. H5 键盘兼容性小结

    H5 键盘兼容性小结 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触 ...

  3. Android技巧小结之新旧版本Notification

    最近开发用到了通知功能,但有几个地方老是提示deprecated,然后就找了篇文章学习了下新旧版本的不同. Notification即通知,用于在通知栏显示提示信息. 在较新的版本中(API leve ...

  4. ajaxfileupload.js上传文件兼容IE7及以上版本

    要兼容IE789,要修改ajaxfileupload.js;要将此处的代码替换掉 if(window.ActiveXObject) { var io = document.createElement( ...

  5. jquery 1.9 1.8 判断 浏览器(IE11,IE8,IE7,IE6)版本

    1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...

  6. 如何将一个div水平垂直居中?4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

  7. 移动端css水平垂直居中

    水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. <div class="box"> <div class="conte ...

  8. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

  9. CSS:使用CSS3将一个div水平和垂直居中显示

    使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...

随机推荐

  1. c++文件中引用C代码

    下面提供一个比较完整的示例程序,一共有四个文件:main.cpp.test.c.test.h.test.hpp main.cpp #include "test.hpp" int m ...

  2. MySQL 检索数据及提高检索速度的方法

    检索数据 mysql> SELECT [DISTINCT] 表名.列名,表名.列名,表名.列名 -- 使用通配符*表示所有列 DISTINCT表示返回不同的值 -> FROM 数据库名.表 ...

  3. cron Linux下的定时执行工具

    说明:测试平台  Ubuntu 16.04.4 LTS cron是一个Linux下的定时执行工具,可以在无需人工干预的情况下运行作业.所以,在Linux中,周期性执行的任务一般由cron这个守护进程来 ...

  4. Ubuntu 双网卡设置

    闲话不多说,直接正题 因为chinanet信号不强,所以买了个usb无线网卡,平常又要做开发,要连着开发板,不知怎么回事,一旦自带无线网卡连上内网的无线路由,就不能访问外网了. 网上搜了好久,终于查到 ...

  5. 通过代理上网时,qq等应用程序连网出错

    虽然现在基本上都用无线,有线宽带等,但是有时候还是避免不了通过代理上网时,于是就发生浏览器可以正常浏览网页,qq等应用程序连接出错等问题,上网搜了好长时间,    都没解决问题,后来慢慢琢磨(其实是乱 ...

  6. 用 Python 写 Robot Framework 测试

    Robot Framework 框架是基于 Python 语言开发的,所以,它本质上是 Python 的一个库. 1.你懂 Python 语言. 2.又想使用 Robot Framework 测试框架 ...

  7. ajax 跨域请求没有带上cookie 解决办法

    公司项目前后端分离.. 前端全部html 静态页面.. 后端java 接口服务 由于前后端分离,出现跨域问题. 为了解决,我们使用jsonp 方式请求接口服务,暂时解决了跨域问题(使用jquery a ...

  8. Ajax(6) Ajax向servlet请求数据库操作 并显示到当前页面 这个未经测试

    假设:1.你的页面在Web-Root下,内容为: <div id="showMsg"></div><input type="text&quo ...

  9. POJ-3252 Avenger

    题意:在区间中,他们化成2进制的数的0的个数大于等于1的数有多少个. 思路:我们需要记录上一次0和1的个数,此外我们还要特别注意一下前导0. 如果前面全是0的时候我们就要注意下一位是不是还是0,如果一 ...

  10. python学习 day19 (3月26日)----(对象组合)

    深谙:非常透彻地了解:熟悉内中情形.谙,读作‘ān’ 熟悉. 1.面向对象作用:规划了代码中的函数处理的是哪一类问题 解决了传参的问题 方便扩展 方便重用 2.类的定义和使用类当中有哪些成员 ''' ...