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

旧城等待， 2024-02-18 16:39 17阅读 0赞

**什么是多终端？**

多终端就是包括了我们的电脑，手机，手持式移动设备比如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及以下版本中，部分块元素拥有默认高度。

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

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