浏览器的兼容性问题
1.使用meta标签来调节浏览器的渲染方式,告诉浏览器该用哪种内核渲染,360浏览器就是ie和chrome 切换,现在使用meta标 签来强制使用最新的内核来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
2. rgba不支持ie8 用opacity 解决
3.CSS3前缀
-webkit- webkit渲染引擎 chrome/safari
-moz gecko引擎 firefox
-ms- trident渲染引擎 IE
-o- opeck渲染引擎 opera
4.过度不兼容ie8 ,可以使用js 实现动画
5.background-size不支持ie8 ,可以使用img
6.使用PIE.htc让IE6/7/8支持CSS3部分属性,像CSS3的border-radius,box-shadow,css backgrounds(-pie-background),Gradients,RGBA属性
.border-radius {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #abcdef;
behavior: url(css/PIE.htc);
}
7 用css hack
IE6: _
IE7/7: *
IE7/Firefox: !important
IE7: *+
IE6/7/8: \9
IE8: \0
9.ie8不支持nth-child,但支持first-child 和last-child,可以通过转化写法处理问题,span:nth-child(2) 可以转化为
span:nth-child + span,可以是ie8现实该内容,last-child可以自定义一个class,类兼容ie8写法,
10,ie8下不支持html5属性placeholder,解决问题的js插件挺多的,常用的使用jquery.JPlaceholder.js插件处理问题
11.识别html5元素,ie中可能无法识别nav/footer,使用html5shiv
12,火狐下表单阻止表单默认提交事件,在form中添加action="javascipt:",
13.始终为按钮button 添加type属性,ie下默认类型是button,其他浏览器下默认类型是submit
14.ie下删除所有不必要的console语句,ie下当遇到console时不识别之后报错,代码不会执行,或者全局自定义一个
window.console方法
15.ie浏览器由于参数过长导致通过get请求下载方法报错,解决改为post 请求
16.ie浏览器下iframe弹框中输入框光标丢失(无法输入)问题,解决清一下frame
17,兼容IE8 new Date()返回NaN问题,解决自定义方法
function parseISO8601(dateStringInRange) {
var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange);
if(parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}
推荐阅读
-
对不起 能装插件的手机浏览器就是可以为所欲为
-
JS访问Webservice的安全性问题_html/css_WEB-ITnose
-
各种浏览器兼容问题_基础知识
-
谷歌浏览器接口请求cookie突然无法携带的问题
-
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace,_PHP教程
-
浏览器CSS兼容问题汇总及解决_html/css_WEB-ITnose
-
php 获取访问者浏览器的代码
-
兼容浏览器的div透明_html/css_WEB-ITnose
-
ExtJS下书写动态生成的xml(兼容火狐)_extjs
-
兼容各种浏览器的上下滚动代码_html/css_WEB-ITnose