IE兼容性小结(IE7及以上版本)
缘由
在急速的互联网时代,原本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兼容性小结(IE7及以上版本)的更多相关文章
- IE对象最后一个属性后不要加逗号,否则在IE7及以下版本中会报错
某函数返回一个对象,如果在最后一个属性后加逗号,IE7及以下版本中会报错 正确代码: return{ top:rect.top-top, bottom:rect.bottom-top, left:re ...
- H5 键盘兼容性小结
H5 键盘兼容性小结 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触 ...
- Android技巧小结之新旧版本Notification
最近开发用到了通知功能,但有几个地方老是提示deprecated,然后就找了篇文章学习了下新旧版本的不同. Notification即通知,用于在通知栏显示提示信息. 在较新的版本中(API leve ...
- ajaxfileupload.js上传文件兼容IE7及以上版本
要兼容IE789,要修改ajaxfileupload.js;要将此处的代码替换掉 if(window.ActiveXObject) { var io = document.createElement( ...
- jquery 1.9 1.8 判断 浏览器(IE11,IE8,IE7,IE6)版本
1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...
- 如何将一个div水平垂直居中?4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. <div class="box"> <div class="conte ...
- div水平垂直居中方法及优缺点
代码: <div class="father"> <div class="son"> </div></div> ...
- CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
随机推荐
- Java中终止线程的三种方法
终止线程一般建议采用的方法是让线程自行结束,进入Dead(死亡)状态,就是执行完run()方法.即如果想要停止一个线程的执行,就要提供某种方式让线程能够自动结束run()方法的执行.比如设置一个标志来 ...
- 爬虫初窥day2:正则
正则在线测试 http://tool.oschina.net/regex https://www.regexpal.com/ http://tool.chinaz.com/regex exp1:筛选所 ...
- 把dataset对象转换成list集合方法
public static List<T> GetList<T>(DataTable table) where T:new() { List<T> list = n ...
- 2017/2/8 hibernate + oracle 实现id的自增 同时 hibernate项目跑起来 会自己增加字段的原因 oracle触发器的使用
hibernate + oracle 实现id的自增 1.在oracle中先创建一个序列 : 序列语法 如下 create sequence (序列名称)seq_student_id minva ...
- Mac网络命令 老命令重新学
网络与通信操作 命令名 功能描述 使用举例 telnet 远程登录 telnet hpc.sp.net.edu.cn rlogin 远程登录 rlogin hostname -l username r ...
- 【Web】网页字体图标的使用
字体图标介绍 网页中图片有很多优点,但也有很多缺点,会增加文件的大小以及增加http请求.这时候就需要用的字体图标(iconfont).字体图标的优点,可以跟图片一样改变透明度.旋转等,本质上是文字, ...
- Java的GUI设计中如何跨界面传值
在Java设计中我们会遇到登录界面的信息,在后面的某个情况也需要使用. 比如这是笔者的一个登录界面 可以看到获取密码和账号 在这个时候的功能的完成需要密码和账号 // 登录信息的获取 public S ...
- AOP的异常通知
一.配置异常通知的步骤 (Aspectj方式) 1.只有当切点报异常才能触发异常通知 2.在spring中有Aspectj 方式提供了异常通知方法 2.1 如果希望通过 schema-base 实 ...
- Codeforces Round #523 (Div. 2) F. Katya and Segments Sets (交互题+思维)
https://codeforces.com/contest/1061/problem/F 题意 假设存在一颗完全k叉树(n<=1e5),允许你进行最多(n*60)次询问,然后输出这棵树的根,每 ...
- 无法重启oracle数据库监听
一.报错 TNS-12541: TNS:no listener TNS-12560: TNS:protocol adapter error TNS-00511: No listener Linu ...