常见浏览器兼容性问题和解决方案

持续更新~

常见的浏览器IE、Firefox、Chrome等主流浏览器兼容性问题和解决方案：

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

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

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

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

3，设置的高度小于浏览器默认高度时显示不正常

解决方案：设置样式overflow: hidden;或者设置line-height小于设置的高度

4，透明度设置

.halfTrans { filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }

5，两个兄弟元素都设置了margin，最终呈现效果是使用较大的margin而不是二者相加

解决方案：可以给子元素增加一个父级元素样式设置overflow: hidden;这样两个本来的兄弟元素就不相邻了，margin也能正常显示了

6，键盘事件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); }

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

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线） 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;

8，取消事件默认行为

// 比如标签a的默认点击行为是跳转，如果点击事件里加了阻止默认，它就不跳转了 // 三种方式 event.preventDefault(); // w3c标准 return false; // w3c标准 window.event.returnValue = false; // 很旧的IE

9，阻止事件冒泡

event.stopPropagation(); // w3c标准 event.cancelBubble = true; // IE

10，禁止选取网页内容

IE: obj.onselectstart = function() {return false;} FF: -moz-user-select:none;