浏览器兼容性问题总结

分为html、css、js三部分。

html

html5shim 可以让你的 IE9 或者更低版本的 IE 浏览器支持 HTML5。

使用方法：

判断浏览器是否支持html5
<script>
        window.onload = function() {
            if (window.applicationCache) {
                alert("你的浏览器支持HTML5");
            } else {
                alert("你的浏览器不支持HTML5");
            }
        }
    </script>

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

js

PC端：

事件的处理（兼容ie）

document.addEventListener document.removeEventListener
document.attachEvent   document.detachEvent()
if(document.addEventListener){
    //火狐、chrome浏览器

    mainDiv.addEventListener("mousemove",yidong,true);  
    //mainDiv.removeEventListener("mousemove",yidong,true);

}else if(document.attachEvent){    //ie浏览器 

    mainDiv.attachEvent("onmousemove",yidong,true);

    //mainDiv.detachEvent("onmousemove",yidong,true);

   }

各浏览器的不同

1、我们常说的事件处理时的event属性，在标准浏览器其是传入的，IE下由window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement

2、ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

3、IE中不能操作tr的innerHtml

4、获得DOM节点的父节点、子节点的方式不同

   其他浏览器：parentNode  parentNode.childNodes

   IE：parentElement parentElement.children

Css

andriod和ios

1、下拉滚动

android:
    overflow:hidden;
    overflow-y:scroll;
ios:
     -webkit-overflow-scrolling: touch;

2、禁止ios和android用户选中文字

-webkit-user-select:none

3、在ios和andriod中,audio元素和video元素无法自动播放

//解决方案：触屏即播
$('html').one('touchstart',function(){ audio.play()})

4、ios下取消input在输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

5、android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

6、CSS动画页面闪白,动画卡顿

//解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

7、fixed定位缺陷
ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题

8、阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

9、iphone及ipad下输入框默认内阴影

-webkit-appearance:none;

10、圆角bug

某些Android手机圆角失效
解决方案：background-clip: padding-box;

11、设置缓存

<meta http-equiv="Cache-Control"content="no-cache"/>
手机页面通常在第一次加载后会进行缓存，然后每次刷新会使用缓存而不是去重新向服务器发送请求。
如果不希望使用缓存可以设置no-cache。

转自：http://www.jianshu.com/p/31e53df2ecce

各浏览器差异

1、margin和padding不同

标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：css里 *{margin:0;padding:0;}

2、块级元素float

块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大,效果：ie6中后面的一块被顶到下一行

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3、img标签
几个img标签放在一起的时候，有些浏览器会有默认的间距
解决方案：使用float属性为img布局

4、min-height兼容
因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}