你对各浏览器兼容性解决方案是否了解,所有的网页制作者都希望自己做出的网页可以完美的兼容所有主流的浏览器,包括IE6,IE7,IE8,Firefox,Opera,Safari,Chrome等等!但是有时候这是不可能实现的,在这里和大家一起共享下浏览器兼容性方面的知识。

一、浏览器兼容性介绍

现代Web设计与开发已经不简单的是设计问题,浏览器兼容性问题也成了Web开发者不容忽视的一个问题,随着IE浏览器每个新版本的推出,都在CSS的标准化方面前进一大步,同时,也就不可避免地在IE的各个主要版本之间产生兼容问题,关于CSS对IE的兼容问题一直是DIV+CSS的一个大问题,因为不同浏览器识别代码产生的效果是不同的,所以造成了很多浏览器对相同的CSS,产生不同的效果,这样就产生了网站的错位,导致了不同浏览器之间的不兼容。

关于浏览器兼容性的这种错位不仅表现在IE上,现在市场上的浏览器种类越来越多,比较常见的有IE系列的浏览器,我们从浏览器排行榜上面也看到其他浏览器如FF,Chrome等等也占据很多的市场份额,这些也可以说都是用户比较常用的浏览器,但是正因为各种浏览器的出现,为了更好的兼容各个版本的浏览器,我们就需要学习如何来处理IE的兼容问题。从而网络上出现了很多所谓的HACK,其实也就是针对各个浏览器的特点,来对各种浏览器的不同嗜好,产生的不同效果,实现的一种兼容各个版本浏览器的效果。

所以,兼容性对于网页设计师来说非常重要。

二、浏览器兼容性问题

当网页在不同浏览器之间显示时,由于不同浏览器支持的CSS标准不同,可能会遇到以下问题:

1、网页布局不整齐;

2、文本或图像重叠;

3、JavaScript功能有问题或错误;

三、浏览器兼容性解决方案

以IE浏览器为例,由于从IE6.0开始为了适应各个版本,就自身有了一个兼容性,所以我们可以指定给网页一个兼容特性;

例如:

网页在IE7下无错位,但在IE6和IE8下有错位,那么我们就可以指定当用户使用IE6和IE8的时候直接指定给IE6和IE8采用IE7的兼容模式来实现网页的不错位。但是这样一来,网页的兼容特性只是实现了IE6,IE7,IE8的一个兼容,但是为了同时兼容FF,我们这个时候就需要使用HACK来达到兼容FF的效果。

这样我们使用IE自身的特性和HACK之间的特性就达到了网页的兼容效果,这样实现兼容效果是最简单最方便的。这样我们其实就是对一种IE浏览器和FF之间的HACK在起作用,相对的写了很少的代码,也很实用和方便。

根据上面的这个例子,我们不难看出,在各大主流浏览器之间,解决浏览器兼容性的方案有以下两种:IE文件兼容方案、Css HACK方案;

1、IE文件兼容方案

IE文件兼容方案是微软针对IE系列浏览器推出的终极解决方案,下面以IE8为例,对该解决方案进行详细介绍:

为了帮助确保你的网页在所有未来版本的IE浏览器中都有一致的外观,IE8引入了IE8文件兼容性。在IE6中引入一个增设的兼容性模式,IE8文件兼容性使你能够在IE呈现你的网页时选择特定编译模式。

了解IE8文件兼容性的必要性

每个主要版本IE新增的功能都是为了让浏览器更容易使用、增加安全性及更支持业界标准。以这些作为IE的特色,其中一个风险就是旧版本网站无法正确的显示。为了将这个风险降到最低,IE6允许网页开发人员选择IE编译和显示他们网页的方式。"Quirksmode"为预设,这会使页面以旧版本浏览器的视点显示,"Standardsmode"(也称为"strictmode")特点是支持业界标准最为完善。然而要利用这个增强的支持功能,网页必须包含恰当的<!DOCTYPE>指令。

◆若一个网页没有包含<!DOCTYPE>指令,IE6会将它以quirksmode显示。若网页包含有效的<!DOCTYPE>指令但浏览器无法辨识,IE6会将它以IE6standardsmode显示。因为少数网站已经包含<!DOCTYPE>指令,兼容性模式的切换相当成功。这使网页开发人员能选择将他们的网页转移为standardsmode的最佳时机。

随著时间经过,更多网站开始使用standardsmode。它们也开始使用IE6的特性和功能来检测IE。举例来说,IE6不支持universalselector(即css之全局选择器*{}),一些网站便使用它来针对IE做特定的对应。

当IE7增加了对全域选择器的支持,那些依赖IE6特点的网站便无法侦测出这个新版本的浏览器。因此那些针对IE的特定对应无法应用于IE7,造成这些网站便无法如他们预期的显示。由于<!DOCTYPE>只支持两种兼容性模式,受到影响的网站拥有者被迫更新他们的网站使其能支持IE7。

◆IE8比之前的任何版本浏览器都更支持业界标准,因此针对旧版本浏览器设计的网页可能无法如预期般呈现。为了帮助减轻所有问题,IE8引入IE8文件兼容性的概念,使你能选择你的网页设计要对应的特定IE版本。IE8文件兼容性在IE8增加了一些新的模式,这些模式能告诉浏览器如何解析和编译一个网页。若你的网页无法在ie8正确的显示,你可以更新你的网站使它支持最新的网页标准(优先选项)或在你的页面上新增一个meta元素用于告诉IE8如何依照旧版本浏览器编译你的页面。

这能让你选择将你的网站更新支持IE8新特点的时机。

认识IE8文件兼容性模式

IE8支持几种IE8文件兼容性模式,它们具有不同的特性并影响内容显示的方式。

1. EmulateIE8mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE8Standardsmode而quirksmode会显示成IE5mode。不同于IE8mode,EmulateIE8mode重设<!DOCTYPE>指令。 
2. EmulateIE7mode指示IE使用<!DOCTYPE>指令来决定如何编译内容。Standardsmode指令会显示成IE7Standardsmode而quirksmode会显示成IE5mode。不同于IE7mode,EmulateIE7mode重设<!DOCTYPE>指令。对于许多网页来说这是最推荐的兼容性模式。 
3. IE5mode编译内容如同IE7的quirksmode之显示状况,和IE5中显示的非常类似。 
4. IE7mode编译内容如同IE7的standardsmode之显示状况,无论网页是否含有<!DOCTYPE>指令。 
5. IE8mode提供对业界标准的最高支持,包含W3CCascadingStyleSheetsLevel2.1Specification和W3CSelectorsAPI,并有限的支持W3CCascadingStyleSheetsLevel3Specification(WorkingDraft)。 
6. Edgemode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edgemode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。由于edgemode使用该IE版本所能支持的最高模式来显示所浏览的网页内容,建议仅使用于测试页及其他非商用页面。

指定IE8文件兼容性模式

要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatiblehttp-equiv标头。以下是指定为EmulateIE7mode兼容性之范例。


<html>

<head>

<!--MimicInternetExplorer7-->

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

<title>MyWebPage</title>

</head>

<body>

<p>Contentgoeshere.</p>

</body>

</html>

其内容随著指定的页面模式而更改,当要模拟IE7时,指定IE=EmulateIE7,指定IE=5,IE=7,或IE=8来选择其中一种兼容性模式。你也可以指定IE=edge来指示IE8使用它支持的最高模式。

X-UA-compatible标头没有大小写之分。然而除了title元素及其他的meta元素之外,它必须出现在网页header节其它元素之前的位置。

设定网站服务器以指定预设兼容性模式

如果你觉得在每个页面加入这段代码比较麻烦,现在介绍一种解决IE8兼容性问题更简便的方法。

如果你用的是IIS服务器,可以配置Web.config文件:

<?xmlversion xmlversion="1.0" encoding="utf-8"?>

<configuration>

<system.webServer>

<httpProtocol>

<customHeaders>

<clear/>

<addname addname="X-UA-Compatible" value="IE=EmulateIE7"/>

</customHeaders>

</httpProtocol>

</system.webServer>

</configuration>
最后修改:1970 年 01 月 01 日
如果觉得我的文章对你有用,请随意赞赏