浏览器内核，兼容问题

常见五大浏览器

通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
(1)Chrome
内核 Webkit–>Blink

(2)Opera
现已改用Google Chrome的Blink内核。

(3)Firefox
内核 ：Gecko

(4)IE
内核：Trident

(5)Safari
内核：webkit

常见兼容问题

块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug）

解决方案：给float标签添加display：inline，将其转换为行内元素

---

表单元素行高不一致

解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）

---

设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度；

解决方案：给容器添加overflow：hidden；

---

当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；

解决方案：给img添加border：0；或者是border：none；

---

min-height在IE6下不兼容

解决方案：
1）min-height：value；

  _height：value；

2）min-height：value；

 height：auto！important；

 height：value；

---

图片默认有间隙

解决方案：
1）给img标签添加左浮动float：left；
2）给img标签添加display：block；

---

按钮默认大小不一

解决方案：
1）用a标签来模拟按钮，添加样式；
2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

---

百分比的bug

解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%
解决方案：给右边浮动的子元素添加clear：right；

---

鼠标指针bug

描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别

解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；

---

透明度属性

解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）
兼容其他浏览器：opacity：value；（取值范围0–1）

---

上下margin的重叠问题

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；
解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值。