常见的浏览器css和js兼容性问题汇总

随着现代浏览器发展速度太快，种类多，版本多，不同厂商浏览器或同一厂商不同版本的浏览器，对css的解析不同，以至于出现浏览器的渲染规范和css的渲染规范出现不兼容性，表现为同样的代码在不同浏览器下的显示效果出现差异化。下面是我的一些解决兼容性的方法。

css兼容

1、 css hack

css hack，让css代码兼容IE浏览器，呈现出和其他厂商浏览器相同的UI界面。

方式一：条件注释法

<! --[if IE]>只在IE浏览器生效<![endif]-->

<! --[if IE] 6>只在IE6浏览器生效<![endif]-->

<! --[if gte IE 6]>只在IE6+浏览器生效<![endif]-->

<! --[if ! IE 8]>只在非IE8浏览器生效<![endif]-->

<! --[if ! IE]>只在非IE浏览器生效<![endif]-->

方式二：属性前缀法

*color:red;//IE7+的hack

+color:red;

-color:red;//IE6-的hack

_color:red;//IE6-的hack

#color:red;//IE6的hack

color:red\0;//IE8-10的hack

color:red\9;//IE6-10的hack

color:red\9\0;//IE9-10的hack

color:red !important;

书写顺序，其他浏览器的css写在前面，IE7写在中间，IE6写在最后面

方式三：浏览器前缀写法

-webkit-（safari chrome）、

-moz-（Firefox）、

-ms-（IE）、

-o-（opera）；

css兼容性实例解决方案汇总：

跨浏览器的CSS透明度

.transparent {
 
  opacity: 0.7;
 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 
  filter: alpha(opacity=70);
 
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  }

显示手型cursor:hand 问题： ie6/7/8、opera 都支持 ，但是safari 、 ff 不支持

 cursor:pointer; (所有浏览器都能识别)

IE浮动边缘产生的双倍距离

#box {
 
        float:left;
        width:100px;
        margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
        display:inline; //使浮动忽略
}

js兼容

我们都知道通过js 的style 不能行外样式 ，当我们想要获取行外样式时一般需要用下面的两个方法；

1 IE 的取值方法；currentStyle
2 Chrome 的方法 getComputedStyle(oDiv,false)
他们的兼容写法

function getStyle(domObj, attr) {
	if(window.getComputedStyle) {
	//兼容谷歌
		return getComputedStyle(domObj, null)[attr];
	}
	兼容IE
	return domObj.currentStyle[attr];
}
//传参方式 getStyle(oDiv,"width") 属性不要忘记加引号；

关于使用 event对象，出现的兼容性问题;

dragEle.onmousedown = function(e) {
				var evt = e || event;	
}

关于滚动条出现的兼容性问题

Chrome 认为滚动条是body的可以通过body.scrollTop 来获取
火狐等浏览器认为滚动条是HTML的；
兼容性写法；

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

封装Dom2 级事件处理函数；事件监听；

添加事件监听器：addEventListener(事件名，处理函数，布尔值)
移除事件监听器：removeEventLisener(事件名，处理函数)；

注意：事件名不带 on 处理函数为函数指针 ，布尔值表示冒泡或捕获 默认false 为冒泡；如果布尔值是true 就是捕获；

IE下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)

注意：事件名带on 默认冒泡 支持捕获；

传统事假和DOM 2级事件的区别:
1.传统事件绑定同一事件句柄只能绑定一个事件函数，绑定多个后面的会覆盖前面的；DOM2级事件支持同一元素的同一事件句柄可以绑定多个监听函数；

事件监听封装 ：
			//参数1 Dom 对象 参数 2 事件类型 参数3 函数
           function addEvent(domObj,type,fn){
				if(domObj.addEventListener){
					domObj.addEventListener(type,fn);
				}else{
					domObj.attachEvent("on"+type,fn)
				}
			}
			//移除事件监听；
			
			function removeEvent(domObj,type,fn){
				if(domObj.removeEventListener){
					domObj.removeEventListener(type,fn);
				}else{
					domObj.detachEvent("on"+type,fn);
				}
			}

获取元素的非行间样式值：

function getStyle(obj,attr) {  //  谁的属性
        if(obj.currentStyle)  // ie 等
        {
            return obj.currentStyle[attr];  // 返回传递过来的某个属性
        }
        else
        {
            return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
        }
    }

阻止事件传播：

<script>
    var btn = document.getElementById("btn");
    document.onclick = function() {
        alert("点击了空白处")
    }
    btn.onclick = function(event) {
        alert("点击了按钮")
        var event = event || window.event;
        if(event && event.stopPropagation)
        {
            event.stopPropagation();  //  w3c 标准
        }
        else
        {
            event.cancelBubble = true;  // ie 678  ie浏览器
        }
    }
</script>

阻止默认事件：

//js阻止默认事件
    document.onclick=function(e){
        var e=e||window.event;
        if (e.preventDefault) {
            e.preventDefault();//W3C标准
        }else{
            e.returnValue='false';//IE..
        }
    }

浏览器的宽高问题:

IE中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
FireFox中： 
document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 
document.documentElement.clientWidth ==> 可见区域宽度 
document.documentElement.clientHeight ==> 可见区域高度 
Opera中： 
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
没有定义W3C的标准，则 
IE为： 
document.documentElement.clientWidth ==> 0 
document.documentElement.clientHeight ==> 0 
FireFox为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽) 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
Opera为： 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 


网页可见区域宽： document.body.clientWidth 
网页可见区域高： document.body.clientHeight 
网页可见区域宽： document.body.offsetWidth (包括边线的宽) 
网页可见区域高： document.body.offsetHeight (包括边线的高) 
网页正文全文宽： document.body.scrollWidth 
网页正文全文高： document.body.scrollHeight 
网页被卷去的高： document.body.scrollTop 
网页被卷去的左： document.body.scrollLeft 
网页正文部分上： window.screenTop 
网页正文部分左： window.screenLeft 
屏幕分辨率的高： window.screen.height 
屏幕分辨率的宽： window.screen.width 
屏幕可用工作区高度： window.screen.availHeight 
屏幕可用工作区宽度： window.screen.availWidth 

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量