兼容性问题

pc端

1.如果图片加a标签在IE9-中会有边框

解决方案

img{border:none;}

2.rgba不支持IE8
解决方案:可以用 opacity

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/

3.默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍

body{margin:0;}

4.浮动的div有margin_left属性ie6会加倍 无论兼容视图还是无声明视图

 IE6唯一识别属性_的方式加_display属性_display:inline;

1. img标签每个图片之间有缝隙

图片浮动

6.PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

移动端

1固定定位position:fixed

//我是中间要滑动的部分
.main{
    width:100%;
    height:auto;
    position:absolute;
    padding-top:50px;/*top值为header的高*/
    padding-bottom:50px;/*bottom值为footer的高*/
    box-sizing:border-box;/*这里改变盒子模型为怪异盒模型，这样padding值不会增加main的高度*/
    overflow-y:scroll;
}

2.防止手机中网页放大和缩小:

<meta name="viewport" content="user-scalable=0" />

3.自动识别电话号码

<meta name="format-detection" content="telephone=no">

4.ios 设置input 按钮样式会被默认样式覆盖

input,
textarea {
  border: 0;
  -webkit-appearance: none;
}

5.手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

原生js

1.可视区域宽

 var winW=
 document.body.clientWidth||document.docuemntElement.clientWidth;

2.滑动区域

var scrollHeight=
document.body.scrollTop||document.docuemntElement.scrollTop;

3.DOM节点相关的问题

  function nextnode(obj){//获取下一个兄弟节点
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        };
    }
    function prenode(obj){//获取上一个兄弟节点
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        };
    }
    function firstnode(obj){//获取第一个子节点
        if (obj.firstElementChild) {
            return obj.firstElementChild;//非IE678支持
        } else{
            return obj.firstChild;//IE678支持
        };
    }
    function lastnode(obj){//获取最后一个子节点
        if (obj.lastElementChild) {
            return obj.lastElementChild;//非IE678支持
        } else{
            return obj.lastChild;//IE678支持
        };
    }

4.获取元素的非行间样式值

 function getStyle(object,oCss) {
             if (object.currentStyle) {
                 return object.currentStyle[oCss];//IE
             }else{
                 return getComputedStyle(object,null)[oCss];//除了IE
             }
     }

5.事件监听

//设置监听事件
     function addEvent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
        if (obj.addEventListener) {
            obj.addEventListener(type,fn,false);//非IE
        } else{
            obj.attachEvent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
        };
    }
    function removeEvent(obj,type,fn){//删除事件监听
        if (obj.removeEventListener) {
            obj.removeEventListener(type,fn,false);//非IE
        } else{
            obj.detachEvent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
        };
    }

6.阻止冒泡

//js阻止事件传播，这里使用click事件为例
    document.onclick=function(e){
        var e=e||window.event;
        if (e.stopPropagation) {
            e.stopPropagation();//W3C标准
        }else{
            e.cancelBubble=true;//IE....
        }
    }

7.阻止默认事件

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