主要阐述目前市面上用得到的浏览器之间的相互兼容问题以及对应解决方案！ 一、CSS兼容问题 1，标签不加样式，各种的margin和padding各不相同！ 只要画页面，几乎是100%会遇到。 解决方案：在编写开头，通常我们会用通配符‘’来统一所有margin和padding，缺陷是‘’会对网页优化有一定影响！会一定程度影响网页加载速度！ 2，块级元素需要float时候，横向的margin实际显示会比设置的大！ 块级元素，在固定位置之前，除了定位一般都是用float来设置，所以块级元素float之后，需要设置布局，必然遇到margin的兼容问题！ 解决方案：将float元素的控制样式设置成行内元素，display：inline。 3，图片默认的间距问题 在多个img便签放一起的时候，部分浏览器会会有默认的间距。 解决方案：用float来解决，或者转化元素！ 4，最小高度不兼容 保证网页美观度，同时需要经常更新网页内容，我们常用的方法是设置最小高，但是部分浏览器是不兼容min-height写法。 解决方案：{min-height:200px;height:auto !importAnt;height:200px;overflow:visible;} 5.表单的兼容问题 a,表单控件不对齐和间隙问题： 解决方案：设置浮动 b,按钮和文本框大小不一样 解决方案：怪异盒模型，盒子大小的计算方式不一样 6，各版本浏览器内核兼容问题 a，-webkit-input（goole） b，-moz-input（firefox） c，-ms-input（） 二、js操作的兼容问题 1，事件绑定兼容 DOM操作绑定方式支持绝大多数浏览器，但是IE8以下浏览器不支持DOM2级操作，所以需要考虑兼容问题 解决方案： 代码： function bindEvent(dom, type, handler) { if (dom.addEventListenter) { console.log('高版本浏览器执行该代码'); dom.addEventListenter(type,handler,false) } if(dom.attachEvent){ console.log('搞版本IE执行该代码'); dom.attachEvent('on'+type,handler); } else{ console.log('其他浏览器支持'); let t='on'+type; dom[t]=handler; } bindEvent(box,'mousedown',function(){
})
};
2,鼠标坐标信息 IE8以下将鼠标坐标信息放在window的属性下面 解决方案： var evnet=event || window.event; 3，获取样式元素 一般浏览器获取样式元素是getComputeStyle,IE用的是currentStyle 4，防止事件冒泡问题 一般浏览器都是用e.stopPropagation() IE中用e.cancelBubble = true；
