html5知识点：多终端浏览器兼容

​什么是多终端？

多终端就是包括了咱们的电脑，手机，手持式移动设备好比

ipad等。

由于各种设备的显示屏幕大小不一，分辨率不一，最佳可视效果的横竖设置也不同，因此多终端浏览器兼容主要就是学习如何让咱们的项目在多终端上呈现相同的显示效果，它主要涉及到两块知识点。

一、浏览器兼容

二、宽高自适应

1、浏览器兼容

什么是浏览器兼容？

在咱们的实际开发中会涉及到在多个浏览器好比

firefox，opera，chrome，或者IE的多个版本下进行调试，在不一样版本浏览器下会出现显示效果不一的状况，而浏览器兼容就是为了处理这种状况。

浏览器最重要或者说核心的部分是

“Rendering Engine”，可大概译为“渲染引擎”，不过咱们通常习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 因此，一般所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不一样的浏览器内核对网页编写语法的解释也有不一样，所以同一网页在不一样的内核的浏览器里的渲染（显示）效果也可能不一样，这也是网页编写者须要在不一样内核的浏览器中测试网页显示效果的缘由。

主要浏览器内核有哪些？

一、Trident内核表明产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 八、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

二、Gecko内核表明做品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

三、WebKit内核表明做品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特色在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，致使一些编写不标准的网页没法正常显示。主要表明做品有Safari和Google的浏览器Chrome。

四、Presto内核表明做品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而从新排版。

五、Blink由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

CSS Bug、CSS Hack和Filter

CSS Bug：CSS样式在各浏览器中解析不一致的状况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

CSS Hack：CSS中，Hack是指一种兼容CSS在不一样浏览器中正确显示的技巧方法，由于它们都属于我的对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。

Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不一样浏览器的Hack类型。

常见

CSS解析Bug及hack

图片间隙：主要解决插入图片以后在图片下方多出

3像素的问题

双倍浮向：当

Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边界加倍显示。

默认高度：在

IE6及如下版本中，部分块元素拥有默认高度。

表单元素行高不一致：单元素行高对齐方式不一致。

按钮元素默认大小不一：各浏览器中按钮元素大小不一致。

百分比

bug：在IE6及如下版本中在解析百分比时，会按四舍五入方式计算从而致使50%加50%大于100%的状况。

鼠标指针

bug：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。

透明属性：

IE低版本浏览器只能使用filter设置透明度，IE高版本浏览器及其余浏览器要用opacity来设置。

过滤器

(filter)

一、下划线过滤器

当在一个属性前面增长了一个下划线后，因为符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，可是在

IE6及更低版本浏览器中会继续解析这个规则。

二、!important关键字过滤器

它表示所附加的声明具备最高优先级的意思。但因为

IE6及更低版本不能识别它，咱们能够利用IE6的这个Bug做为过滤器来兼容ＩＥ６和其它标准浏览器。

三、*属性过滤器

当在一个属性前面增长了

*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的做用。

2、宽高自适应

什么是宽高自适应？

咱们的项目须要在多终端上显示，那么你们就会发现电脑显示器，手机屏幕，平板等，它们的分辨率都不一样。咱们不可能为了单一显示而专门作一套规则，而是须要咱们制定地规则能适应各类设备的显示，这就涉及到宽高能自动适配咱们设备的显示屏分辨率，这就是宽高自适应。

一、宽度自适应

二、元素具有最小高度的自适应

三、高度自适应

想要学习前端开发的同窗，能够加群：

543627393

学习哦！