浏览器
主流浏览器
- Internet Explorer（IE）
- Safari（苹果）
- Mozilla Firefox（火狐）
- Google Chrome（谷歌）
- Opera（欧朋）
最早的浏览器
Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN
五大浏览器内核
- Trident （MSHTML） （ie 三叉戟；三叉线；三齿鱼叉）
- Gecko （壁虎）
- Presto （ 迅速，世界公认渲染速度最快）
- Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
- Blink (由Google和Opera Software开发的浏览器排版引擎，2013年4月发布)。
内核代表作
- Trident:：IE
- Gecko：Firefox
- Webkit：Safari、Chrome
- Presto：Opera
- Blink：Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用
浏览器兼容常见BUG
| BUG |
描述 |
Hack |
| 图片有边框(ie8及以下) |
当图片加在IE上会出现边框 |
img{border:0 none;} |
| 图片间隙 |
在div中插入图片时，图片会将div下方撑大大约三像素 |
img{display:block;} |
| 双倍浮向（双倍边距）（仅IE6） |
解析浮动元素时，会错误地把浮向边边界（margin）加倍显示 |
给浮动元素添加声明：｛display:inline-block;｝ |
| 默认高度（IE6、IE7） |
部分块元素拥有默认高度（在16px左右；） |
hack1：给元素添加声明：｛font-size:0｝；hack2：给元素添加声明： {overflow:hidden;} |
| 表单元素行高对齐不一致 |
同左 |
hack1：给表单元素添加声明：｛float｝;hack2：给表单元素添加声明:｛vertical-align：middle;｝ |
| 按钮元素默认大小不一 |
各浏览器中按钮元素大小不一致 |
外层嵌套一个元素，将表单元素的样式赋给这个外层元素 |
| 百分比bug |
IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响） |
平时做页面不要做太满。如果都左浮动，最后一个清除右浮动 clear:left display:inline-block;===>float |
| 鼠标指针bug |
cursor属性的hand属性值只有IE9以下浏览器识别，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。 |
cursor:hand; (ie)、cursor：pointer； |
| 透明属性 |
该属性声明识别不同 |
opacity：0-1；filter:alpha(opacity=0-100) （ie） |
| margin塌陷 |
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上 |
hack:1给父级元素添加overflow:hidden;(推荐使用)；hack:2给父元素或者子元素加浮动 |
| margin合并bug |
当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值 |
给上元素套个div，只设置overflow: hidden;不能设置宽高 |
不同浏览器前缀（兼容）
-webkit-border-box：谷歌浏览器、国内浏览器
-0-border-box: opera浏览器
-moz-border-box：火狐浏览器
-ms-border-box：ie浏览器
鼠标指针cursor属性值
auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形