浏览器兼容性整理

写作目的：记录下这个笼统的浏览器兼容性问题。让自己更清晰一些。

浏览器兼容性问题出现的原因就是浏览器内核不同所造成的，那么回顾一下常用浏览器的内核：

• Trident（只能应用于windows平台，不开源） IE浏览器
• Gecko（开源） FireFox
• Webkit（开源，主要应用于Mac） Safari Chrome
• Presto（渲染速度最快，以牺牲兼容性为代价） Oprea
• Blink Chrome Oprea
• 还有一个常用的浏览器叫做360，双内核，IE和Chrome
• QQ浏览器 Chromium（Chrome的试验品，更新很快） webkit
• 搜狗浏览器 Chromium+Trident
• uc手机浏览器自称使用u3内核开发，本质是基于开源内核Webkit开发，在Webkit的基础上进行二次优化，并不能算是完全的自主内核。 想到昨天面试官问我浏览器兼容性，问的PC端的浏览器，他举例子说哪几个浏览器，把这个也说上了。。。

切入正题

1.我一般先写一个reset.css

div,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dd,dt{
    margin:0；
    padding:0；
} //每个浏览器对内外补丁大小解析不同
ul,ol,li{
    list-style:none;
}
a{
    text-decoration:none;
}

2.img标签一行多个排列时，右侧和下方有默认空隙。

解决方法：给img标签添加属性：

float:left;

PS:

容器中的图片会把容器撑大三像素，给容器添加属性：

overflow:hidden;

溢出隐藏，解决所有浏览器此问题。

3.透明度问题

IE中的写法：

filter:alpha(opacity=60);

普通浏览器

 opacity:0.6;

4.不同的浏览器对input框解析不同，为了统一我们可以这么做：
直接上demo：

html部分:

<div class="cont">
    <div class="wrap">
        <input class="ensure" type="button" value="确定" />
    </div>
</div>

css部分:
.cont{
    width:300px;
    height:300px;
}
.wrap{
    width:50px;
    height:20px;
    border:1px solid #orange;
}
.ensure{
    width:100%;
    height:100%;//浏览器会有默认高度，可以自己定义。
    border:0;//外边框解析不一致，去掉自己写。  
    background:#fff;//表单按钮属性会有默认背景颜色，自己更改即可
}

（正常来讲，如果没有明确设置height的值，那么设置的line-height值就是height的值。在IE8中的input要设定高度。input，img，iframe等元素不支持伪元素 ，因为他们不是容器。）

PS：表单元素对齐方法：添加float属性。

5.解决高度塌陷以及清除浮动。简单的demo：

html部分:

<div class="cont">
    <div class="one"> 
    </div>
    <div class="one">
    </div>
    <div class="two">
    </div>
</div>

css部分:
.cont{
    width:100%;
    height:100%;
    overflow:hidden;//此时的容器没有定义高度，容器中有浮动的子元素撑不起来，会导致高度塌陷。添加此属性解决高度塌陷
}
.one{
    width:100px;
    height:100px;
    float:left;
}
.two{
    clear:both; //由于上面两个div浮动，脱离文档流，在这里清除浮动，div才能呆在应该呆的地方
    width:100px;
    height:100px;
}

不过通常为了省事，大家也都会用万能清除法来解决这个问题（建议写在公共类里面，当然也是为了省事）

.clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
} 
.clearfix{
    zoom:1;
} //zoom(IE专有属性)可解决ie6,ie7浮动问题，IE8以及以上浏览器才能识别伪类元素。

6.360双核浏览器，据说添加以下头部meta信息可以使得网页用webkit内核渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">

一些兼容性写法，为了IE和普通浏览器通用

css:

cursor:pointer; //鼠标手势
border:0; //去除外边框

js:
统一使用 [] 获取集合类对象。 
统一通过 getAttribute() 获取自定义属性。
IE || 其他 
window.event || event 
e.cancleBubble || e.stopPropagation //阻止事件冒泡

慢慢积累~~~