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

持续更新~

常见的浏览器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;