浏览器
主流浏览器
- 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手形