什么是浏览器的兼容问题
浏览器的兼容性问题也就是网页的兼容性或者网站兼容性问题, 指网页在各种浏览器上的css表现形式不同而产生的浏览器和网页间的兼容问题. 又或者不同浏览器对javaScript脚本中的一些方法的识别不同.
兼容问题最多的是IE低版本浏览器, windows_XP系统的浏览器版本是IE6-8, window7支持IE9-11, 一般做到兼容IE6
浏览器兼容的几个方面: 1.html 以及 css样式 2.H5, CSS3新特性
3.js脚本一些方法的支持
CSS样式的兼容
CSS样式的兼容是前端工作中不可避免并且相当复杂的一项内容。
当代浏览器都支持 CSS ，但是由于不同的浏览器对CSS解释不同，不同的浏览器的默认值表现的差别：
IE默认margin
FF默认padding
导致在不同浏览器中打开我们做好的页面时，会显示混乱。
常见的兼容问题:
1.IE浏览器给图片加超链接时,图片会自动加上边框(紫色两像素的边框)
解决方案：img{border:none/0}
2.不同浏览器的标签默认的外边距和内田冲不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：*{margin:0;padding:0;}
3.IE6浮动元素横向margin加倍（产生因素：一个块元素、float：left、margin-left：5px时 ，显 示的margin为10px；行内元素没有上下外边距，有左右外边距。）
解决方案：display：inline；使浮动忽略IE下再解析为5px
4.margin:0 auto,对IE6不起作用
解决方案：给body{text-align:center}
5.经典3像素bug：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
解决方案：设置非浮动元素浮动
6.高度自适应问题（最小高度）IE6不认识min-height，IE6里的内容会自动撑开
解决方案：div { height:auto!important; height:200px; min-height:200px; }
7.opacity 定义元素的透明度
解决方案：filter：alpha（opacity=80）；/*ie支持该属性*/
opacity：0.8；/*支持css3的浏览器*/
8.游标手指cursor
解决方案：cursor: pointer 可以同时在 IE Chrome 等中显示游标手指状， hand 仅 IE 可以
IE9以下版本浏览器兼容HTML5的方法
使用菜鸟的静态资源html5shiv包
使用条件注释法引入包
<!--[if It IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js ">
</script>
<![end if]-->
并且在样式表中初始化新标签的CSS：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
css3是最新的css 标准. w3c的css3规范仍在开发. 但是, 许多新的css属性已经在现代浏览器使用
IE只有在版本9 及以上支持
js脚本兼容
1、事件对象
任何一个对象只要触发了事件，都传一个参数（event）;
event对象
IE:默认参数 window.event
非IE：必须传递一个参数
兼容方法：
IE浏览器下，只要访问全局对象window的event属性即可，忽略该参数，用window.event来读取该event。
obj.onclick = function(e){� e = e || window.event
}
2、事件对象中的属性
IE下，even对象有x,y属性，但是没有pageX,pageY属性；
非IE下,event对象有pageX,pageY属性，但是没有x,y属性
兼容方法：
使用条件注释法：<!--[if IE]>...event.x...<![end if]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。
或者：var x = (event.x ? event.x : event.pageX)
3、innerHTML、innerText、textContent
IE支持innerHTML、innerText，不支持textContent属性
其他浏览器三种属性都支持
4、DOM2级事件绑定
js的事件绑定方法中，IE9以下(不包括9)只支持attachEvent,而FF和Chrome只支持addEventListener，所以就必须为这两个方法做兼容处理，原理是先判断attachEvent只否为真（存在），如果为真则用attachEvent（）方法，否则的话就用addEventListener（）。
同样的，事件移除方法也有对应的支持：
IE9以下(不包括9)只支持detachEvent,而FF和Chrome只支持removeEventListener
把这个兼容写法封装成一个函数
function myAddEvent(obj,ev,fn) {
//obj为要绑定事件的元素，ev为要绑定的事件，fn为绑定事件的函数
if(obj.attachEvent){
obj.attachEvent("on" + ev,fn);
}else {
obj.addEventListener(ev,fn,false);
}
}
7、获取页面内所有元素的一个集合
IE：documen.all
非IE：document.getElementsByTagName("*")
documen.all
8、获取对象的可视化区域的宽和高，滚动条距离顶端的距离
var w = document.body.clientWidth || document.documentElement.clientWidth;
var t = document.body.scrollTop || document.documentElement.scrollTop;
网友评论