1、chrome:(谷歌)追求简洁、快速、安全,个人认为是最好用、速度最快的浏览器。
2、Internet Explorer 简称IE,微软公司旗下浏览器。
3、firefox浏览器,简称FF浏览器,mozilla公司旗下浏览器,个人认为第二好用浏览器。
4、safari浏览器,苹果公司旗下浏览器,在苹果系统下是很优秀的浏览器,已停止对windows系统的支持。
5、opera浏览器,挪威厂商opera旗下浏览器,该公司还在研发另一款浏览器opera next。
三、五大主流浏览器内核
1、Trident内核:代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台,且不是开源的。
代表作品还有腾讯、Maxthon(遨游)、360浏览器等。但由于市场份额比较大,曾经出现脱离了W3C标准的时候,同时IE版本比较多,
存在很多的兼容性问题。
2、Gecko内核:代表作品是Firefox,即火狐浏览器。因火狐是最多的用户,故常被称为firefox内核它是开源的,最大优势是跨平台,在Microsoft Windows、Linux、MacOs X等主
要操作系统中使用。
Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战
3、Webkit内核:代表作品是Safari、曾经的Chrome,是开源的项目。
4、Presto内核:代表作品是Opera,Presto是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎。在13年之后,Opera宣布加入谷歌阵营,弃用了
Presto
5、Blink内核:由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎,V8,使JS运行速度极大地提高了
四、浏览器兼容
1、间隙问题
1.1 div图片间隙
描述:在div中插入图片,div下方将会被图片撑大3px(主要出现在IE6以下版本中)。
hack:①
<div> <img src = “#”></div>
,(将div与img写在一行,如前所示。)
②将<img>转化为块状元素,给<img>添加声明
(display:block)
1.2 dt / li 中图片间隙
问题描述:在dt 或 li中添加图片出现图片间隙,主要出现在IE6版本中。
hack:添加声明
(display:block;overflow:hidden)
2、默认高度问题
问题描述:在IE6以下版本中,部分块状元素拥有默认高度(低于18px出现。)当块状元素的height:<18px时,会有一个默认高度18px左右。
问题如下:
hack:①给元素添加声明:
font-size:0px;
hack:②给元素添加声明:
overflow:hidden;
3、双倍浮向(双倍边距)
问题描述:在IE6以下版本中,浏览器解析浮动元素时,会错误的把向边的边界加倍显示。
hack:给浮动元素添加声明:
display:inline;
4、百分比bug
问题描述:在IE6以下版本中,解析百分比时,会按照四舍五入原则计算导致:50%+50% > 100%
hack:给右边浮动元素添加声明
clear:right;
5、鼠标指针bug
问题描述:
cursor:hand;的声明只能在IE浏览器中识别。
cursor:pointer;的声明在IE6以上版本和其他内核浏览器可以识别。
hack:统一某元素鼠标指针形状为手型(hand),应添加声明
cursor:pointer
6、表单行高不一致
问题描述:在IE、火狐、欧朋、Safari、Chrome浏览器中表单的行高对齐方式不一致。
hack:给表单元素添加
float:left;
7、透明属性
IE写法:
filter:alpha(opacity=value)
,兼容其他浏览器:
opacity:value;
8、属性值后缀
针对IE8加属性值后缀\o,如:
height:200px\o;
9、!important优先级声明
#box{height:60px!important;}
在IE8以上版本种支持。
hack:#box{
height:60px!important;
height:60px;//优先级声明必须要放到前面,至于为什么会这样先后顺序的写,请参考我写的:优雅降级vs渐进增强
}
浏览器兼容主要是针对IE浏览器的兼容,目前来说IE浏览器通过几次的改版,以往的问题基本不再存在,市面上也很少有企业去兼容IE6以下的版本(银行、政府、等金融机构可能在在坚守IE6)。