首先,为什么要兼容浏览器?
不同的浏览器有不同的内核,即使同是IE浏览器,IE7和IE8也是不同的内核。内核不同,浏览器对同一段代码的表现就不同。
具体的兼容浏览器
HTML中的兼容
1.使用meta标签来调节浏览器的渲染方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="1">
例如360双核浏览器就是在ie和chrome之间来回切换,代码如上。
2.ul标签在IE6/IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有默认的内边距。一般来说可链入common.css或者手动设置内外边距为0.
CSS中的兼容
1.IE8不支持rgba写法,但支持opacity;IE8不支持过渡,可使用JS实现;IE8不支持background-size;IE8不支持nth-child,但支持first-child和last-child;IE8不支持placeholder,可使用js插件jquery.JPlaceholder.js。
2.在使用绝对定位或者相对定位后,IE中设置z-index无效。因为因为其依赖父元素的z-index,但父元素默认是0。
3.IE双边距:浮动后有产生横向margin,该元素此时的外边距是其值的2倍。可使用display:block解决。
4.火狐阻止表单默认提交事件:在form中添加action="javascript:".
5.IE下遇到console时不识别报错,代码不会执行。可使用window.console方法。
6.IE下GET请求参数过长时会导致请求下载文件方法报错,可使用post。
7.IE8的new Date()返回NaN
function getDate(otherDate){
var exp =/^s*(d{4})-(dd)-(dd)s*$/,
date = new Date(NaN),month,
parts = exp.exec(otherDate);
if(parts){
month =+ parts[2];
date.setFullYear(parts[1].month-1,parts[3]);
if(month != date.getMonth()+1){
date.setTime(NaN);
}
}
return date;
}
8.css前缀
-moz- 火狐等使用Mozilla引擎的浏览器
-webkit- Safari,谷歌等使用Webkit引擎的浏览器
-o- 早期的Opera浏览器
-ms- 部分IE
Javascript中的兼容
1.标准浏览器事件绑定方法为addEventListener,IE是attachEvent.
2.标准浏览器的事件捕获方式是由外至内,IE为由内至外。以IE为准。
3.标准浏览器获取windown.event方法为event.target,IE为event.srcElement.
嗯,嗯,,目前能想起来暂时就这么多啦啦啦啦啦