CSS

1. 不同浏览器的标签默认的padding和margin不同

通配符 *{margin:0;padding:0;}

2. IE盒模型：margin、content(包含padding、border)；

W3C盒模型：margin、border、padding、content

采用box-sizing：border-box(IE)和content-box(W3C) 解决

3.CSS3新属性加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

4.超链接访问后hover样式不再出现问题

a:link {} a:visited {} a:hover {} a:active {} //顺序 L-V-H-A

5. CSS hack 解决浏览器兼容

- 减号是IE6专有的hack
\9 IE6/IE7/IE8/IE9/IE10都生效
\0 IE8/IE9/IE10都生效，是IE8/9/10的hack
\9\0 只对IE9/IE10生效，是IE9/10的hack
ie8也不支持flex布局，须改成其它布局；

6.设置为float的div在ie下设置的margin会加倍

加上 display:inline;

7.列表样式/缩进

设置 list-style:none; margin:0; padding:0;

8.CSS3字体单位rem兼容方案

E9+开始支持，IE8就只能通过引入js库来支持了，在所有css文件引用和DOM元素之后引入rem.js

JS

1使用babel进行ES6到ES5的代码转化，获取浏览器兼容性代码。

2.添加事件(attachEvent/addEventListener) 和移除事件(detachEvent/removeEventListener)

//添加事件
function addEvent(elem, eventName, handler) {if (elem.attachEvent) {elem.attachEvent("on" + eventName,function(){handler.call(elem)}); 　 //此处使用回调函数call()，让this指向elem} else if (elem.addEventListener) {elem.addEventListener(eventName, handler, false);}
}
//移除事件
function removeEvent(elem, eventName, handler) {if (elem.detachEvent) {elem.detachEvent("on" + eventName,function(){handler.call(elem)});  //此处使用回调函数call()，让this指向elem} else if (elem.removeEventListener) {elem.removeEventListener(eventName, handler, false);}
}

3.IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;

4.事件源对象问题：IE：event对象有srcElement属性，但是没有target属性;

Firefox: event对象有target属性，但是没有srcElement属性。

srcObj = event.srcElement?event.srcElement:event.target;

5.event事件对象兼容 + 阻止事件冒泡/阻止事件默认行为

document.onclick=function(e){var e=e||window.event; //事件对象兼容//阻止冒泡if (e.stopPropagation) {e.stopPropagation();//W3C标准}else{e.cancelBubble=true;//IE....}//阻止默认事件if(e.preventDefault){e.preventDefault();//W3C标准}else{e.returnValue=false;//IE....}
}

其他

渐进增强和优雅降级都是一种开发方式，更是一种设计理念。

1. 渐进增强是指在编写Web页面时，首先保证最基本、最核心的功能实现，并让所有的浏览器（包括旧式、低端的浏览器）都能看到站点的内容；然后再考虑使用高级但非必要的CSS和JavaScript等增强功能，为当前和未来的浏览器提供更好的支持。

2. 优雅降级是指在编写Web页面时，首先必须完整的实现站点的所有内容(包括功能和效果)。然后再为那些无法支持所有功能和效果的浏览器增加候选方案(如IE8不支持canvas和svg)，使之在旧式、低端的浏览器上以某种形式降级体验却不至于完全失效。

浏览器兼容性常见问题相关推荐

移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
介绍几款浏览器兼容性测试工具
昨天和朋友聊到了有关浏览器兼容性的问题,在开发中有时的确很让人苦恼,我向他推荐了几款测试浏览器兼容的工具,分享给大伙,有什么更好的工具或是解决方法还希望大家拿出来晒一晒. IETester 这是我最先 ...
如何在使用新技术前评估其浏览器兼容性
这里向大家推荐两个网站:caniuse.com以及html5test.com,大家在使用新技术前,可以在这两个网站上看看浏览器的支持情况,看看自己能不能接受,同时也考虑一下能不能优雅降级. caniu ...
47种常见的浏览器兼容性问题大汇总
浏览器兼容性问题大汇总 Ø JavaScript 3 1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.hr ...
html 布局兼容性,HTML+CSS入门浏览器兼容性问题及解决方案
本篇教程介绍了HTML+CSS入门浏览器兼容性问题及解决方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 问题一:不同浏览器的标签默认的外补丁和内补丁不同问题现象: ...
再谈浏览器兼容性测试
今天跟大家聊一个老生常谈的话题:浏览器兼容性测试. 测试国内网站的同学是不是已经非常头疼了,因为面对的浏览器除了国际大牌如IE, Chrome, Firefox, Opera, Safari, 还有国 ...
CSS设置透明边框解决浏览器兼容性问题
设置透明边框的代码其实很简单,就只有一行,但是有时候很实用. border: 1px solid transparent; 有时间,你既需要边框不为0, 又不希望看到边框, 这个时候,它就起到作 ...
CSS实现跨浏览器兼容性的盒阴影效果
2019独角兽企业重金招聘Python工程师标准>>> CSS实现跨浏览器兼容性的盒阴影效果一.无关紧要碎碎念在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了. ...
2015.7.13 第五课课程重点（z-index、overflow、浏览器兼容性）
1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条 ...

浏览器兼容性常见问题

CSS

JS

其他

浏览器兼容性常见问题相关推荐

最新文章

热门文章