pc端 移动端 CSS以及 js的兼容

什么是浏览器的兼容

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。

1 块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

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

2 设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度

解决办法 ：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

3 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug

解决办法 在display:block;后面加入display:inline;display:table;

4 图片默认有间距

解决办法 使用float为图片布局

5 标签最低高度设置min-height不兼容

 决绝办法 如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

6 透明度的写法

E浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)

7、父元素里有块元素，如果给子元素添加添加margin-top,父元素会“掉”下来（高度塌陷）
hack1：给父元素添加overflow：hidden；
hack2：给子元素添加float；
hack3：给父元素加边框；
或者用其他的方法达到我们想要的效果：如给父元素加padding-top

8

7、双倍浮向（双倍边距）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边的边界加倍显示。
hack:给浮动元素添加声明：display:inline;
8、当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素
hack1：给a加display：inline-block;
hack2：给a加display：inline;
hack3：给li加float，再加宽度

js的兼容写法

1 对象事件(event)

document.onclick=function(e){
    var e = e || window.event;   //兼容写法
}

2 阻止事件的冒泡(事件冒泡就是 就是给子元素添加事件父元素也会绑定上相同的事件)

if(evt.stopPropagation){
    return evt.stopPropagation();    //一定不能漏下evt  方法前一定要写明对象
}else{
    return evt.cancelbuble();
}

 3 阻止默认事件（默认事件就是浏览器自带的一些事件 比如 a链接的跳转）

if (e.preventDefault) {
     e.preventDefault();   //W3C标准
}else{
     e.returnValue = 'false';    //IE
}

 4 获取第一个（next）（或者最后一个(last)）子节点 

if (obj.lastElementChild) {
     return obj.firstElementChild;   //非IE6/7/8支持
} else{
     return obj.firstChild;   //IE6/7/8支持
};

 5 设置监听事件（注意 ie的事件要加on）

//参数一：对象
//参数二：事件类型
//参数三：事件处理函数
function addEvent(obj, type, fn){
     if (obj.addEventListener) {
          obj.addEventListener(type, fn, false);  //非IE
     } else{
          obj.attachEvent('on' + type, fn);  //IE
     }
}

 

6 获取事件源的

srcObj = event.srcElement ? event.srcElement : event.target;

 移动端 常见兼容

1、部分情况下对非可点击元素如(label,span)监听click事件时，ios下不会触发
hack：css中增加cursor:pointer
2、底部输入框被键盘遮挡问题//(jq写法)

var oheight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
     if($(document).height() < oheight){
          $("#footer").css("position", "static");
     }else{
          $("#footer").css("position", "absolute");
     }
});

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

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

 

4、ios safari时间显示问题
设置new Date日期格式的时候，在ios中的safari中发现显示效果与其他浏览器不一致。
只识别：new Date("year/month/day");

5、移动端300ms延迟。
hack1：一般在移动端用tap事件来取代click事件
hack2：fastclick可以解决在手机上点击事件的300ms延迟

6、手机上的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+ 
}