常见浏览器兼容性问题及解决方案(面试题) |
您所在的位置：网站首页 › 浏览器兼容性问题百度百科 › 常见浏览器兼容性问题及解决方案(面试题) |
|
前言： 不同的浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种： 第一种：渲染引擎 第二种：js引擎 所以浏览器主要兼容性问题我一般分为两大部分：css兼容、js兼容 五大浏览器内核Chrome谷歌之前Webkit，已改Blink内核FireFox火狐GeckoSsfari苹果WebkitIETridentOpera欧朋现已改用Google Chrome的Blink内核一、css兼容 1.不同浏览器的标签默认的margin和padding不同 解决方法： 在css里设置全局的*{margin:0;padding:0;)},但是性能不好一般我们在引入reset.css样式重置； 2.在css3新属性，加浏览器前缀兼容早期浏览器-moz- 火狐浏览器 -Webkit- safari谷歌浏览器等使用Webkit引擎的浏览器 -o- Opera浏览器（早期） -ms- IE 3.块属性标签float后，又有横行的margin情况下，IE浏览器margin加倍的问题 问题：常见症状是IE6中后面的一块被顶到下一行。 解决方案：在这个div里面加上display:inline; 4.设置较小高度标签（一般小于10px），在IE6，IE7，页面中高度超出自己设置的高度 解决方案： 给超出高度的标签设置overflow:hidden；或者设置行高line-height小于你设置的高度； 5.行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug 解决方案：在display：block；后面加入display：inline；/display：table；6.IE浏览器div最小宽度和高度不生效的问题 解决方案： #box{ width: 80px; height: 35px; } html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px; }7.超链接访问过后hover样式就不出现的问题 我们可以简记一个速成口诀：L-V-H-A a:link{} a:visited{} a:hover{} a:active{}8.图片默认有间距 解决方案：使用float属性为img布局（所有图片左浮） 9.css hack 解决浏览器 background-color:yellow 0; 0是留给ie8的 +background-color:pink; + ie7 _background-color:orange; _专门给神奇的ie6二、js兼容 1.时间绑定 IE：dom.attachEvent(); 标准浏览器:dom.addEventListener('click',function(event){},false); 2.event事件对象问题 document.onClick=function(ev){//谷歌火狐的写法，IE9以上不支持，往下不支持 var e = ev; console.log(e); } document.onClick=function(){//谷歌和IE支持，火狐不支持 var e = event; console.log(e); } document.onClick=function(ev){//兼容写法 var e=ev||window.event; var mouseX=e.clientX;//鼠标x轴的坐标 var mouseY=e.clientY;//鼠标y轴的坐标 }3.event.srcElement(事件源对象)问题 IE:event对象有srcElement属性，但是没有target属性； Eirefox：event对象有target属性，但是没有srcElement属性. srcObj=event.srcElement?event.scrElement:event.target; 4.获取元素的非行间样式值： IE:dom.currentStyle[‘width’]获取元素高度 标准浏览器:window.getComputedStyle(ibj,null)[‘width’]; 跨浏览器兼容解决方法 //获取元素属性值的兼容写法 function getStyle(obj,attr){ if(obj.currentStyle){ //兼容IE Obj.currentStyle[attr]; return obj.currentStyle[attr]; }else{ //非IE return window.getComputedStyle(obj,null)[attr]; } }5.阻止事件冒泡传播 //js阻止事件传播，这里使用click事件为例 document.onClick=function(e){ var e = e||window.event; if(e.stopPropagation){ e.stopPropagation();//W3C标准 }else{ e.cancelBubble=true;//IE } }6.阻止事件默认行为 //js阻止默认事件 一般阻止a链接href，form表单submit提交 document.onClick=function(e){ var e=e||window.event; if(e.preventDefault){ e.preventDefault();//W3C标准 } }7.ajax兼容问题 IE:ActiveXObject 其他： xmlHttpRequest 在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest() 跨浏览器兼容解决方法： window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ //1.创建ajax对象 //只支持非IE6浏览器 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); //alert(new XMLHttpRequest()); }else{ //只支持IE6浏览器 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但 // 但服务器那端是不解析这个时间的 oAjax.open("get","a.txt?t=" + new Date().getTime(),true); //3.发送 oAjax.send(null); //4.接受信息 oAjax.onreadystatechange = function(){ //浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了 if(oAjax.readyState==4){ //状态码,只有等于200,代表接受完成,并且成功了 if(oAjax.status==200){ alert("成功" + oAjax.responseText); }else{ alert("失败"); } } }; }; }; |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |