浏览器兼容性问题（内核、IEtester、cssrest、盒模型）
Teresasmida 2015-05-04
浏览器兼容性问题（内核、IEtester、cssrest、盒模型）
一、浏览器内核
IE：Trident
火狐：Gecko
Chrome/safri：webkit
Opera：Presto（Opera前内核已经被废弃，现在使用Blink）
Blink(google和Opera联合开发高版本用这个)
二、IEtester的bug
经常崩溃
当窗口大小改变的时候，页面内容可能会消失（作者改进中）； 上一页/下一页功能不正常； Focus功能不正常； Java apple不能运行； Flash不能在IE6下正常运行。
三、浏览器初始化
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
四、盒模型
IE8以下的盒模型和W3C盒模型不同之处
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
//IE 在不加<!DOCTYPE html>头的时候会出现问题宽度会不包括padding，（IE11不再有此问题）
五、css遇到的兼容性问题
1 .IE6浮动 margin 产生的双倍距离
解决办法hack
<div style="float:left;width:200px;height:200px;background-color:pink;margin:200px;_margin-left:100px">
这个边距
</div>
或者display：inline
2.当子元素浮动未知高度时，使父容器适应子元素的高度bug
overflow:auto;-------让父容器自适应子元素的高度
_zoom:1;---------为了兼容IE6而使用的CSS Hack
3.图片下方有空隙产生给img元素添加属性：display:block;
4.Float在ie6下，存在问题，float 会到下一行，不能和非float在一行内；
5.上一个元素为Float时会影响下一个元素的位置；
解决办法：css hack暴力设置值IE6下的margin-left值；或者将float用非float包起来。或者如果效果是让最下面一行占据一整行，要用clear：both；
6.ie6 不显示boder：dashed
