Web浏览器兼容模式笔记

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
IE浏览器 Trident内核，也成为IE内核
Chrome浏览器 Webkit内核，现在是Blink内核
Firefox浏览器 Gecko内核，俗称Firefox内核
Safari浏览器 Webkit内核
Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器 IE+Chrome双内核
猎豹浏览器 IE+Chrome双内核
百度浏览器 IE内核
QQ浏览器 Trident（兼容模式）+Webkit（高速模式）

1.html5标签的兼容方案:引入：- html5shiv.js;

2.Css3媒体查询兼容方案:引入：- Respond.js;

3.Css3字体单位“rem”兼容方案：rem.js;

4.css样式兼容：
①　问题表现：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：CSS里 *{margin:0;padding:0;}

②　块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

③　设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

④　行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug
问题表现：IE6的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;

⑤　标签最低高度设置min-height不兼容问题表现：min-height本身就是一个不兼容的css属性，
所以设置min-height时不能兼容所有浏览器解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

⑥　光标手形
问题表现：firefox不支持hand，但ie支持pointer
解决方案：统一使用cursor:pointer;

⑦　8. 元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }

⑧　9. Div的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。