浏览器的兼容

1.浏览器内核及差异 :

IE : Trident (以前的IE占有率非常高,代码不公开)
Firefox : Gecko ( 代码完全公开 )
Chrome : Webkit 
Opera : Blink

2.浏览器的兼容:

(1): 标签的默认padding和margin不同
解决 : 在css里面设置margin:0;padding:0;

(2): 块级标签float后,又有横行margin情况下,在IE显示margin比设置的大
解决: 在float的标签样式加入display:inline;

(3):设置较小高度的标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置的高度
备注:一般出现在设置小圆角背景的标签
解决: 给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

(4): 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6的BUG
备注: 行内元素为了设置宽高,display:block;(除input标签外)
解决问题 : 设置display:inline 之后再加 display: table;
display的值 : 
run-in : 此元素会根据上下文作为块级元素或内联元素显示。
list-item : 此元素作为列表显示
none : 不显示
block : 显示块级元素
inline-block : 行内块元素
flex : 弹性盒子

(5): 图片默认有间距 
备注: img是行内标签,只要不超出容器宽度,img都会排在一行里;
解决: 使用float属性为img布局

(6):标签最低高度设置min-height不兼容
备注: 当内容小于300px时,容器的高度为300px;当内容的高度大于这个值的时候,
容器高度被撑开,而不是出现滚动条
解决: 设置 { min-height: 200px; height: auto !important;heigt:200px;overflow:visible}

(7):透明度的兼容css设置
备注: 浏览器对标签的默认属性解析不同造成

(8):css 中的 hack
hacker可以把浏览器分为三类 : IE6 ; IE7 和 遨游; 其他(IE8 chrome )