html5多终端浏览器兼容

什么是多终端?

多终端就是包括了我们的电脑，手机，手持式移动设备比如ipad等。

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

1、浏览器兼容

2、宽高自适应

一、浏览器兼容

（一）什么是浏览器兼容?

在我们的实际开发中会涉及到在多个浏览器比如firefox，opera，chrome，或者IE的多个版本下进行调试，在不同版本浏览器下会出现显示效果不一的情况，而浏览器兼容就是为了处理这种情况。

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

主要浏览器内核有哪些?

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

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

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

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

5、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)

1、下划线过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。

2、!important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。

3、*属性过滤器

当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属性的作用。

二、宽高自适应

什么是宽高自适应?

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

1、宽度自适应

2、元素具备最小高度的自适应

3、高度自适应

http://shenzhen.offcn.com/