2023年6月21日发(作者：)
前端常见浏览器兼容性问题解决⽅案前⾔：不同浏览器的内核不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎所以浏览器兼容性问题⼀般指：css兼容、js兼容浏览器内核（渲染引擎）Chrome⾕歌之前Webkit，已改Blink内核FireFox⽕狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改⽤Google Chrome的Blink内核⼀、css兼容1. 不同浏览器的标签默认的margin和padding不同问题症状： 随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。碰到频率: 100%解决⽅案：1. CSS⾥
*{margin:0;padding:0;} 但是性能不好2. ⼀般我们会引⼊样式重置；备注： 这个是最常见的也是最易解决的⼀个浏览器兼容性问题，所有的CSS⽂件开头都会⽤样式重置各个标签的内外补丁是0。2. css3新属性，加浏览器前缀兼容早期浏览器-moz- /* ⽕狐浏览器
/-webkit- / Safari, ⾕歌浏览器等使⽤Webkit引擎的浏览器
/-o- / Opera浏览器(早期)
/-ms- / IE */哪些css3属性需要加：定义关键帧动画 @keyframescss3中的变形（transform）、过渡(transtion)、动画(animation)border-radius 圆⾓box-shadow 盒⼦阴影flex 弹性布局....使⽤：.myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */}/* 复杂属性 keyframes */@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}/* 不带前缀的放到最后 */@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}3. 块属性标签float后，⼜有横⾏的margin情况下，IE 浏览器margin加倍的问题问题症状: 常见症状是IE6中后⾯的⼀块被顶到下⼀⾏解决⽅案： 设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;
min-width: 80px;
min-height: 35px; }7. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多⼈应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:
L-V-H-ACode:8. 图⽚默认有间距问题症状： ⼏个img标签放在⼀起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作⽤。碰到⼏率： 20%解决⽅案： 使⽤float属性为img布局(所有图⽚左浮)备注： 因为img标签是⾏内属性标签，所以只要不超出容器宽度，img标签都会排在⼀⾏⾥，但是部分浏览器的img标签之间会有个间距。去掉这个间距使⽤float是正道。9. css hack解决浏览器兼容性不同浏览器，识别不同的样式，csshack本⾝就是处理浏览器兼容的。下⾯是css hack写法：background-color:yellow0; 0 是留给ie8的+background-color:pink; + ie7定了；_background-color:orange; _专门留给神奇的ie6；⼆、js兼容1. 事件绑定IE:
Event();标准浏览器：
ntListener(‘click',function(event){},false);标准浏览器采⽤事件捕获的⽅式对应IE的事件冒泡机制（即标准由最外元素⾄最内元素或者IE由最内元素到最外元素）最后标准⽅亦觉得IE这⽅⾯的⽐较合理，所以便将事件冒泡纳⼊了标准，这也是addEventListener第三个参数的由来，⽽且事件冒泡作为了默认值第三值默认false，表⽰事件冒泡⽅式。如果浏览器不⽀持
addEventListener()⽅法, 你可以使⽤
attachEvent()⽅法替代。以下实例演⽰了跨浏览器的解决⽅法：var x = mentById("myBtn");if (ntListener) { //所有主流浏览器，ie9+ ntListener("click", myFunction);} else if (Event) { // IE 8 及更早 IE 版本 Event("onclick", myFunction);}2. event事件对象问题 k=function(ev){//⾕歌⽕狐的写法，IE9以上⽀持，往下不⽀持； var e=ev; (e); } k=function(){//⾕歌和IE⽀持，⽕狐不⽀持； var e=event; (e); } k=function(ev){//兼容写法； var e=ev||; var mouseX=X;//⿏标X轴的坐标 var mouseY=Y;//⿏标Y轴的坐标 }2. ment(事件源对象)问题IE：
event对象有srcElement属性，但是没有target属性；Firefox:
event对象有target属性，但是没有srcElement属性。解决⽅法：srcObj = ment?ment:;3. 获取元素的⾮⾏间样式值：IE: tStyle[‘width’] 获取元素⾼度标准浏览器：
putedStyle(obj, null)['width'];跨浏览器兼容解决⽅法： // 获取元素属性值的兼容写法 function getStyle(obj,attr){ if(tStyle){ //兼容IE tStyle[attr]; return tStyle[attr]; }else{ //⾮IE， return putedStyle(obj, null)[attr];
} }4. 阻⽌事件冒泡传播：//js阻⽌事件传播，这⾥使⽤click事件为例 k=function(e){ var e=e||; if (opagation) { opagation();//W3C标准 }else{ Bubble=true;//IE.... } }5. 阻⽌事件默认⾏为：//js阻⽌默认事件 ⼀般阻⽌a链接href，form表单submit提交 k=function(e){ var e=e||; if (tDefault) { tDefault();//W3C标准 }else{ Value='false';//IE.. } }6. ajax兼容问题IE： ActiveXObject其他： xmlHttpReuest在IE6以前不是⽤XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()跨浏览器兼容解决⽅法：看更多⾯试题，
2023年6月21日发(作者：)
前端常见浏览器兼容性问题解决⽅案前⾔：不同浏览器的内核不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js 引擎所以浏览器兼容性问题⼀般指：css兼容、js兼容浏览器内核（渲染引擎）Chrome⾕歌之前Webkit，已改Blink内核FireFox⽕狐GeckoSafari苹果WebkitIETridentOpera欧朋现已改⽤Google Chrome的Blink内核⼀、css兼容1. 不同浏览器的标签默认的margin和padding不同问题症状： 随便写⼏个标签，不加样式控制的情况下，各⾃的margin 和padding差异较⼤。碰到频率: 100%解决⽅案：1. CSS⾥
*{margin:0;padding:0;} 但是性能不好2. ⼀般我们会引⼊样式重置；备注： 这个是最常见的也是最易解决的⼀个浏览器兼容性问题，所有的CSS⽂件开头都会⽤样式重置各个标签的内外补丁是0。2. css3新属性，加浏览器前缀兼容早期浏览器-moz- /* ⽕狐浏览器
/-webkit- / Safari, ⾕歌浏览器等使⽤Webkit引擎的浏览器
/-o- / Opera浏览器(早期)
/-ms- / IE */哪些css3属性需要加：定义关键帧动画 @keyframescss3中的变形（transform）、过渡(transtion)、动画(animation)border-radius 圆⾓box-shadow 盒⼦阴影flex 弹性布局....使⽤：.myClass { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; /* 不带前缀的放到最后 */}/* 复杂属性 keyframes */@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}/* 不带前缀的放到最后 */@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0; }}3. 块属性标签float后，⼜有横⾏的margin情况下，IE 浏览器margin加倍的问题问题症状: 常见症状是IE6中后⾯的⼀块被顶到下⼀⾏解决⽅案： 设置为float的div在ie下设置的margin会加倍。这是⼀个ie6都存在的bug。解决⽅案是在这个div⾥⾯加上display:inline;
min-width: 80px;
min-height: 35px; }7. 超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多⼈应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:
L-V-H-ACode:8. 图⽚默认有间距问题症状： ⼏个img标签放在⼀起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作⽤。碰到⼏率： 20%解决⽅案： 使⽤float属性为img布局(所有图⽚左浮)备注： 因为img标签是⾏内属性标签，所以只要不超出容器宽度，img标签都会排在⼀⾏⾥，但是部分浏览器的img标签之间会有个间距。去掉这个间距使⽤float是正道。9. css hack解决浏览器兼容性不同浏览器，识别不同的样式，csshack本⾝就是处理浏览器兼容的。下⾯是css hack写法：background-color:yellow0; 0 是留给ie8的+background-color:pink; + ie7定了；_background-color:orange; _专门留给神奇的ie6；⼆、js兼容1. 事件绑定IE:
Event();标准浏览器：
ntListener(‘click',function(event){},false);标准浏览器采⽤事件捕获的⽅式对应IE的事件冒泡机制（即标准由最外元素⾄最内元素或者IE由最内元素到最外元素）最后标准⽅亦觉得IE这⽅⾯的⽐较合理，所以便将事件冒泡纳⼊了标准，这也是addEventListener第三个参数的由来，⽽且事件冒泡作为了默认值第三值默认false，表⽰事件冒泡⽅式。如果浏览器不⽀持
addEventListener()⽅法, 你可以使⽤
attachEvent()⽅法替代。以下实例演⽰了跨浏览器的解决⽅法：var x = mentById("myBtn");if (ntListener) { //所有主流浏览器，ie9+ ntListener("click", myFunction);} else if (Event) { // IE 8 及更早 IE 版本 Event("onclick", myFunction);}2. event事件对象问题 k=function(ev){//⾕歌⽕狐的写法，IE9以上⽀持，往下不⽀持； var e=ev; (e); } k=function(){//⾕歌和IE⽀持，⽕狐不⽀持； var e=event; (e); } k=function(ev){//兼容写法； var e=ev||; var mouseX=X;//⿏标X轴的坐标 var mouseY=Y;//⿏标Y轴的坐标 }2. ment(事件源对象)问题IE：
event对象有srcElement属性，但是没有target属性；Firefox:
event对象有target属性，但是没有srcElement属性。解决⽅法：srcObj = ment?ment:;3. 获取元素的⾮⾏间样式值：IE: tStyle[‘width’] 获取元素⾼度标准浏览器：
putedStyle(obj, null)['width'];跨浏览器兼容解决⽅法： // 获取元素属性值的兼容写法 function getStyle(obj,attr){ if(tStyle){ //兼容IE tStyle[attr]; return tStyle[attr]; }else{ //⾮IE， return putedStyle(obj, null)[attr];
} }4. 阻⽌事件冒泡传播：//js阻⽌事件传播，这⾥使⽤click事件为例 k=function(e){ var e=e||; if (opagation) { opagation();//W3C标准 }else{ Bubble=true;//IE.... } }5. 阻⽌事件默认⾏为：//js阻⽌默认事件 ⼀般阻⽌a链接href，form表单submit提交 k=function(e){ var e=e||; if (tDefault) { tDefault();//W3C标准 }else{ Value='false';//IE.. } }6. ajax兼容问题IE： ActiveXObject其他： xmlHttpReuest在IE6以前不是⽤XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()跨浏览器兼容解决⽅法：看更多⾯试题，
发布评论