浏览器常见的兼容问题

一、什么是浏览器兼容性？

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验

二、了解浏览器
主流浏览器：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)
四大内核:Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核)

三、常见的浏览器兼容问题和解决方案

1，各浏览器默认的margin/padding值不同

解决方案：公共css里头部加上 * {margin: 0; padding: 0;}

2，块级元素设置display: inline-block;时在某些浏览器两个元素之间会有小间隙

解决方案：可以在父元素样式里加上font-size:0;然后子元素加上各自的font-size设置；或者可以使用float布局

3.鼠标显示手型cursor:hand

问题： ie6/7/8、opera 都支持 但是safari 、 Firefox 不支持

解决：写成 cursor:pointer; (所有浏览器都能识别) 。

4. ul或li浮动后，显示在div外

问题：div中的ul或li设置float以后，都不在div中

解决：必须在ul标签后加<div style=“clear:both”>来闭合外层div

        5，键盘事件keyCode兼容性写法

        var myInput = document.getElementById('myInput');

myInput.onkeypress = function(e) {

        e = e ? e : (window.event ? window.event : "");

        var code = e.keyCode ? e.keyCode : e.which;

         console.log(code);

}

      6，获取宽高的兼容性写法

        // 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）

var client_w = document.documentElement.clientWidth || document.body.clientWidth;

var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）

var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;

var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）

var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;

var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度

var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

7，阻止事件默认行为

// 比如标签a的默认点击行为是跳转，如果点击事件里加了阻止默认，它就不跳转了

// 三种方式

event.preventDefault(); // w3c标准

return false; // w3c标准

window.event.returnValue = false; // 很旧的IE

8，阻止事件冒泡方法

 event.stopPropagation(); // w3c标准

event.cancelBubble = true; // IE