设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 11|回复: 0

[未分类] IE兼容性小结(IE7及以上版本)

[复制链接]

9947

主题

9947

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
31498
发表于 2018-5-16 23:35:10 | 显示全部楼层 |阅读模式
在急速的互联网时代,原本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 var b_version=navigator.appVersion  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. $(target).siblings("span").show();
  8. $(target).focus(function() {
  9. $(this).siblings("span").hide();
  10. }) $(target).blur(function(){
  11. if($(this).val() == "") {
  12. $(this).siblings("span").show();
  13. }
  14. }) }
  15. }
  16. placeholder(".ipt")}) </script > 
复制代码
版本1.1
  1. function placeholder(target) {
  2. var browser = navigator.appName var b_version = navigator.appVersion var version = b_version.split(";");
  3. 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") {
  4. var $elements = $(target);
  5. $elements.each(function () {
  6. var $this = $(this);
  7. //alert($this.val());
  8. if ($this.val() == "") {
  9. $this.siblings("span").show();
  10. }
  11. $this.focus(function () {
  12. $this.siblings("span").hide();
  13. }) $this.blur(function () {
  14. if ($this.val() == "") {
  15. $this.siblings("span").show();
  16. }
  17. }) });
  18. }
  19. }
  20. window.onload = function () {
  21. placeholder(".ipt");
  22. }
复制代码
  1. .spn {position: absolute;font-size: 14px;left: 112px;top: 12px;display: none;color:#666;}
  2. <div class="name" style="width: 338px;" >
  3.    <div class="reg-tit" >邮箱验证码 </div >
  4. <input class="ipt" type="text" id="TextEmailYZCode" maxlength="6" runat="server" placeholder="邮箱验证码" autocomplete="off" style="width: 105px;" / >
  5. <span class="spn" >邮箱验证码 </span >
  6. <input type="button" id="id_sendemail" value="获取邮箱验证码" class="hqyzm" style="width: 116px;" / >
  7. </div >
  8. <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. <script type="text/javascript" >
  3. var myChart = echarts.init(document.getElementById('piezc'));
  4. var DSBJ = parseFloat($("#id_DSBJ").val()).toFixed(2);
  5. var KYYE = parseFloat($("#id_KYYE").val()).toFixed(2);
  6. var DJZJ = parseFloat($("#id_DJZJ").val()).toFixed(2);
  7. option = {
  8. tooltip: {
  9. trigger: 'item', formatter: "{a} <br/ >{b}: {c} ({d}%)" }, color: ['#f1584d', '#99cc99', '#60aff1'], legend: {
  10. orient: 'vertical', x: 'left', data: ['待收本金', '可用余额', '冻结金额'] }, series: [ {
  11. name: '资金分布', type: 'pie', radius: ['50%', '80%'], avoidLabelOverlap: false, center: [300, 130], label: {
  12. normal: {
  13. show: false, position: 'center' }, emphasis: {
  14. show: true, textStyle: {
  15. fontSize: '20', fontWeight: 'bold' }, formatter: "{b}
  16. {c}" }
  17. }, labelLine: {
  18. normal: {
  19. show: false }
  20. }, data: [ { value: DSBJ, name: '待收本金' }, { value: KYYE, name: '可用余额' }, { value: DJZJ, name: '冻结金额' }
  21. ] }
  22. ]};
  23. // 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
  24. </script >
复制代码
这里只是贴出了我使用的饼图图表,其实ECharts有很多各种类型好用的图表,有兴趣的朋友可以深入研究。 ECharts官网链接:http://echarts.baidu.com/download.html
好了,这次就总结以上这五点兼容性问题,如果后续还有其他的,我也会更新在下面。好久没写技术博客了,虽然很多都是老调重弹,但望园友勿喷。 备注:文中如有错误之处,望各路大神指出,小弟定当虚心学习!  



上一篇:JavaScript的setter与getter方法
下一篇:iOS 常用手势
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-5-25 20:34

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表