认识浏览器以及浏览器的兼容问题

百般思念 提交于 2020-02-28 10:52:36

一、关于浏览器

(1)现在主流的浏览器有:Internet Explorer、Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、遨游。
(2)最早的浏览器:Mosaic / Netscape Navigator(网景领航者)(1994-2008)简称NN。
浏览器与浏览器之间也会产生矛盾,解决矛盾最好的方法莫过于打一架!在上世纪90年代就爆发了第一次浏览器大战,微软发布了他的IE浏览器,和网景公司的Netscape Navigator浏览器大打出手,取代了网景公司Netscape Navigator在市场的主导地位。甚至还引发了美国诉微软案官司。在20世纪的时候又发生了第二次浏览器大战,Internet Explorer9便是战争的产物!

二、五大浏览器内核

(1)Trident(MSHTML)(三叉戟;三插线;三齿鱼叉)
(2)Gecko(壁虎)
(3)Presto(迅速的)
(4)Webkit(Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)
(5)Blink(由Google和Opera Software开发的浏览器排版引擎)

三、五大浏览器内核代表作品

Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器。代表作品IE,因为IE捆绑在Windows中,所以占有极高的市场份额,又称IE内核或是MSHTML,此内核只能应用于Windows平台,且是不开源的。
Gecko:代表作品Mozilla Firefox、NetScape 6以后版本,是开源的,它的最大优势是跨平台,能在Microsoft Windows、Linux和macOS X等主要操作系统上运行。
Webkit:代表作品Safari、Chrome、遨游浏览器3,是一个开源项目。
Presto:代表作品Opera(前内核),Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现已改用Google Chrome的Blink内核。
Blink:由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。
浏览器内核:
(1)主要分成两部分:渲染引擎和JS引擎。
(2)渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等)、以及计算网页的显示方式,然后会输出至显示器或打印机,浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
(3)JS引擎:解析和执行JavaScript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分得很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

四、关于浏览器兼容的一些概念和原因

为什么会出现浏览器兼容问题?
由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重合,这就为各种莫名其妙的bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让CSS应用起来比想象得要麻烦。

(1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS Bug。
(2)CSS Hack:CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为他们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补刀)来描述这种行为。
(3)Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。

使用Hack带来的一些副作用

降低了CSS代码的可读性,增加了代码的负担。
使用CSS Hack 和Filter通常有两种方法:
(1)一种是利用浏览器自身的bug,来隐藏或显示样式或声明;
(2)另一种是利用浏览器对CSS支持的不完善,如对某些规则或语法还没有形成支持,来隐藏或显示样式。

五、常见的CSS bug和CSS Hack

(1)图片间隙

[I] div中的图片间隙(该bug出现在所有浏览器中)
描述:在div中插入图片时,图片会将div下方撑大三像素。
hack将<img.>转为块状元素,给<img.>添加声明;display:block;
[II] 当图片横着排的时候,图片跟图片之间存在着一定的间距
hack:img{float:left;}

(2)dt,li中图片间隙

hack:将<img.>转为块状元素,给<img.>添加声明:display:block;

(3)双倍浮向(双倍边距)(只有IE6出现)

描述:在IE6中,一个居左(或居右)浮动的元素放置进一个容器盒(box),并在浮动元素上使用了左边距(或右边距)在IE6内便产生了双倍边距。
hack:给浮动元素添加声明:display:inline;

(4)图片在IE浏览器上有蓝色的边框(加在a标签里)

hack:给img的边写成0;img{border:0;}

(5)默认高度(IE6、IE7)

描述:在IE6及以下版本中,部分块元素拥有默认高度(低于18px高度)
hack1:给元素添加声明:font-size:0;
hack2:给元素添加声明:overflow:hidden;

(6)表单元素距离顶部间距不一致(IE,MOZ,C,O,S)

描述:表单元素距离顶部的距离不一致
hack:给表单元素添加声明:float:left;

(7)按钮元素默认大小不一

描述:在不同的浏览器中按钮元素大小不一样;
hack1:统一大小(用a标记模拟)
hack2:input外边套一个标签,在这个标签里写按钮的样式,把input的边框去掉。
hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。

(8)百分比Bug

描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)
hack:给右面的浮动元素添加声明;
clear:right;

(9)鼠标指针Bug

描述:cursor属性的hand属性值只有IE9以下浏览器识别,其他浏览器不识别该声明,cursor属性的pointer属性值IE6.0以上版本及其他内核浏览器都识别该声明;
hack:如统一某元素鼠标指针形状为手型;
应添加声明:cursor:pointer;

(10)子元素没设置任何浮动,设置了margin-top属性后,会错误地把margin-top的属性值添加给父元素

hack1:给父元素添加overflow:hidden;声明。
*:如果子元素设置了浮动属性也不会出现这个问题。

(I)当给li中的a转成block·;并且有height,并有·float的时候,li中没设置浮动会出现阶梯显示,hack:同时给li加float;
(II)input的type类型是text的时候,提示信息用value表示,如果设置了input的高度,在其他浏览器上显示的value的内容是垂直居中的,但是在·IE6中是在顶部的
,解决的方法就是给input添加一个行高等于它的高度。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!