如果一个网页开头有什么区别
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
如果页面以。开头
<!DOCTYPE html>
<html>
<head>
<!-- without X-UA-Compatible meta -->
如果没有区别,我想我可以忽略X-UA-Compatible
元头,因为我只想在所有IE版本中以大多数标准模式呈现它。
2015年10月更新
这个答案是几年前发布的,现在问题真的应该是你应该考虑在你的网站上使用X-UA-Compatible
标签吗?微软对其浏览器所做的更改(更多内容见下文)。
根据您支持的Microsoft浏览器,您可能不需要继续使用X-UA-Compatible
标记。如果您需要支持IE9或IE8,那么我建议使用该标签。如果您只支持最新的浏览器(IE11和/或Edge),那么我会考虑完全删除此标记。如果您使用Twitter Bootstrap并且需要消除验证警告,则此标记必须以其指定的顺序出现。其他信息如下:
X-UA-Compatible
元标记允许Web作者选择应该呈现页面的Internet Explorer版本。 IE11对这些模式进行了更改;请参阅下面的IE11注释。 Microsoft Edge,取代IE11的浏览器,仅在某些情况下尊重X-UA-Compatible
元标记。请参阅下面的Microsoft Edge注释。
根据微软的说法,当使用X-UA-Compatible
标签时,它应该在你的文件head
中尽可能高:
如果您使用的是X-UA兼容的META标签,您可以将其尽可能靠近页面顶部放置。 Internet Explorer开始使用最新版本解释标记。当Internet Explorer遇到兼容X-UA的META标记时,它会使用指定版本的引擎重新启动。这是一个性能损失,因为浏览器必须停止并重新开始分析内容。
以下是您的选择:
为了尝试理解每个含义,这里是Microsoft提供的定义:
Internet Explorer支持许多文档兼容性模式,这些模式启用不同的功能并可能影响内容的显示方式:
- 边缘模式告诉Internet Explorer以可用的最高模式显示内容。使用Internet Explorer 9,这相当于IE9模式。如果Internet Explorer的未来版本支持更高的兼容性模式,则设置为边缘模式的页面将以该版本支持的最高模式显示。使用Internet Explorer 9查看时,这些相同的页面仍将以IE9模式显示.Internet Explorer支持许多文档兼容模式,这些模式启用不同的功能并可能影响内容的显示方式:
- IE11模式为已建立和新兴的行业标准提供最高支持,包括HTML5,CSS3等。
- IE10模式为已建立和新兴的行业标准提供最高支持,包括HTML5,CSS3等。
- IE9模式为已建立和新兴的行业标准提供了最高支持,包括HTML5(工作草案),W3C级联样式表级别3规范(工作草案),可缩放矢量图形(SVG)1.0规范等。 [编者注:IE 9不支持CSS3动画]。
- IE8模式支持许多既定标准,包括W3C级联样式表2.1级规范和W3C选择器API;它还为W3C级联样式表3级规范(工作草案)和其他新兴标准提供有限的支持。
- 无论页面是否包含指令,IE7模式都会将内容呈现为Internet Explorer 7以标准模式显示的内容。
- 模拟IE9模式告诉Internet Explorer使用该指令来确定如何呈现内容。标准模式指令以IE9模式显示,而怪异模式指令以IE5模式显示。与IE9模式不同,Emulate IE9模式遵循该指令。
- 模拟IE8模式告诉Internet Explorer使用该指令来确定如何呈现内容。标准模式指令以IE8模式显示,而怪异模式指令以IE5模式显示。与IE8模式不同,Emulate IE8模式遵循该指令。
- 模拟IE7模式告诉Internet Explorer使用该指令来确定如何呈现内容。标准模式指令以Internet Explorer 7标准模式显示,而quirks模式指令以IE5模式显示。与IE7模式不同,Emulate IE7模式遵循该指令。对于许多网站,这是首选的兼容模式。
- IE5模式呈现内容,好像它是由Internet Explorer 7以怪异模式显示的,这与Microsoft Internet Explorer 5中显示内容的方式非常相似。
IE10注意:从IE10开始,怪癖模式的行为与早期版本的浏览器不同。在IE9及更早版本中,怪癖模式将网页限制为IE5.5支持的功能。在IE10中,quirks模式符合HTML5规范中指定的差异。
就个人而言,我总是选择http-equiv="X-UA-Compatible" content="IE=edge"
元标记,因为旧版本有很多错误,我不希望IE决定进入“兼容模式”并将我的网站显示为IE7 vs IE8或9.我总是喜欢最新版本IE浏览器
IE11
来自Microsoft:
从IE11开始,边缘模式是首选的文档模式;它代表了对浏览器可用的现代标准的最高支持。
使用HTML5文档类型声明启用边缘模式:
<!doctype html>
边缘模式是在Internet Explorer 8中引入的,并且在随后的每个版本中都可用。请注意,边缘模式支持的功能仅限于呈现内容的特定浏览器版本支持的功能。
从IE11开始,不推荐使用文档模式,不应再使用它们,临时情况除外。确保更新依赖于旧版功能和文档模式的站点以反映现代标准。
如果您必须定位特定文档模式,以便在您重新设计网站时支持现代标准和功能,请注意您正在使用过渡功能,该功能可能在将来的版本中不可用。
如果您当前使用x-ua兼容标头来定位旧文档模式,则您的网站可能无法反映IE11的最佳体验。
Microsoft Edge(与Windows 10捆绑在一起的Internet Explorer替换)
关于IE的“Edge”版本的X-UA-Compatible
元标记的信息。 From Microsoft:
介绍“生活”边缘文档模式
正如我们在2013年8月宣布的那样,我们正在弃用IE11中的文档模式。通过我们最新的平台更新,对遗留文档模式的需求主要限于企业遗留Web应用程序。随着新的体系结构更改,这些遗留文档模式将与“生活”边缘模式中的更改隔离开来,这将有助于为依赖这些模式的客户提供更高级别的兼容性,并帮助我们更快地在Edge中进行更改。 IE仍将遵循Intranet站点,兼容性视图列表中的站点以及仅与企业模式一起使用时所服务的文档模式。
公共Internet站点将使用新的Edge模式平台进行渲染(忽略X-UA-Compatible)。我们的目标是Edge从现在开始是“活的”文档模式,未来不会再引入文档模式。
由于Microsoft Edge中的更改在大多数情况下不再支持文档模式,因此Microsoft有一个tool来扫描您的站点以检查它是否具有与Edge不兼容的代码。
Chrome = 1 Info的IE
还有chrome=1
,你可以使用或与上述选项之一一起使用,如:<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
。 chrome=1
适用于Google的Chrome Frame,定义如下:
Google Chrome Frame是一个开源浏览器插件。安装了插件的用户可以在浏览器中打开页面时访问Google Chrome的开放式Web技术和快速JavaScript引擎。
Google Chrome Frame可无缝增强您在Internet Explorer中的浏览体验。它使用Google Chrome的渲染技术显示支持Google Chrome Frame的网站,让您可以访问最新的HTML5功能以及Google Chrome的性能和安全功能,而不会以任何方式中断您常用的浏览器使用情况。
安装Google Chrome浏览器内嵌框架后,无需考虑即可让网络变得更好。
但是要使插件工作,你必须在chrome=1
元标记中使用X-UA-Compatible
。
有关Chrome Frame的更多信息,请访问here。
注意:Google Chrome Frame仅适用于IE6 through IE9,于2014年2月25日停用。更多信息可以在here找到。感谢@mck的链接。
验证:
HTML5:
只有在使用W3 Validator时,页面才会使用<meta http-equiv="X-UA-Compatible" content="IE=Edge">
进行验证。对于其他值,它将抛出错误:A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.
换句话说,如果你有IE=edge,chrome=1
它将无法验证。我完全忽略了这个错误,因为现代浏览器只是忽略了这行代码。
如果您必须拥有完全有效的代码,请考虑通过设置HTTP标头在服务器级别执行此操作。微软称,If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header).
请参阅olibre's answer或bitinn's answer,了解有关如何设置HTTP标头的更多详细信息。
XHTML
只要标签正确关闭(即<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
vs />
),使用>
时验证就没有问题。
Twitter Bootstrap
自至少2014年以来,Bootstrap团队一直强烈建议使用此标签,并且当省略标签时,由twbs团队撰写的linter继续抛出Bootlint的warning。 linter区分警告和错误,因此省略此标记的严重性可能被认为是次要的。
有关X-UA-Compatible
的更多信息,请参阅Microsoft的Website Defining Document Compatibility。
有关IE支持的更多信息,请参阅caniuse.com。
有关Twitter Bootstrap要求的更多信息,请参阅bootlint项目wiki page。
如果您在与IE服务器相同的网络中使用您的网站,即使是DOCTYPE,IE也会切换到兼容模式。
添加meta http-equiv="X-UA-Compatible" content="IE=Edge"
会禁用此不需要的行为。
这是LITERALLY 1 google query away,但这里是:
http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
了解传统文档模式
使用以下值以边缘模式显示网页,这是Internet Explorer支持的最高标准模式,从Internet Explorer 6到IE11。
<meta http-equiv="x-ua-compatible" content="IE=edge"
请注意,这在功能上等同于使用HTML5 doctype。它将Internet Explorer置于支持的最高文档模式。 Edge最常用于定期维护的网站,这些网站经常在多个浏览器(包括Internet Explorer)之间进行互操作性测试。
注意从IE11开始,边缘模式被认为是首选文档模式。 (在早期版本中,它被认为是实验性的。)要了解更多信息,请参阅文档模式已弃用。从Windows Internet Explorer 8开始,一些Web开发人员使用边缘模式元素隐藏地址栏上的“兼容性视图”按钮。从IE11开始,由于已从地址栏中删除按钮,因此不再需要这样做。因为它强制所有页面都以标准模式打开,所以无论Internet Explorer的版本如何,您都可能会对使用Internet Explorer查看的所有页面使用边缘模式。请勿这样做,因为仅从Internet Explorer 8开始支持X-UA兼容标头。
提示如果希望所有受支持的Internet Explorer版本以标准模式打开页面,请使用HTML5文档类型声明,如前面的示例所示。
搜索结果中还有:
2.1.3.5 X-UA兼容性元标记和HTTP响应标头
此功能不会在任何版本的Microsoft Edge中实现。
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
见https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx
是的,我知道我迟到了,但我刚刚遇到了一些问题和讨论,最后我的老板让我从我一直在处理的所有文件中删除了X-UA-Compatible
标签。
如果此信息已过期或不再相关,请更正我。
使用content=
"IE=edge,chrome=1"
跳过其他X-UA-Compatible
模式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
--------------------------
javascript::JSON.parse()
所必需的
(即使存在<!DOCTYPE html>
)在您的HTML中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge
意味着IE应该使用其渲染引擎的最新(边缘)版本chrome=1
意味着如果安装了IE应该使用Chrome rendering engine或者更好地配置Web服务器: (另见RiaD's answer)
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
</IfModule>
</IfModule>
<IfModule mod_headers.c>
Header append Vary User-Agent
</IfModule>
server {
#...
add_header X-UA-Compatible "IE=Edge,chrome=1";
}
sub vcl_deliver {
if( resp.http.Content-Type ~ "text/html" ) {
set resp.http.X-UA-Compatible = "IE=edge,chrome=1";
}
}
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=edge,chrome=1" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
正如Lynda(见评论)所注意到的那样,Compatibility changes in IE11推荐Edge模式:
从IE11开始,边缘模式是首选的文档模式;它代表了对浏览器可用的现代标准的最高支持。
但微软的立场并不清楚。另一个MSDN page did not recommend Edge mode:
由于边缘模式强制在标准模式下打开所有页面,因此无论Internet Explorer的版本如何,您都可能会对使用Internet Explorer查看的所有页面使用此页面。不要这样做,因为仅从Windows Internet Explorer 8开始支持
X-UA-Compatible
标头。
相反,微软建议使用<!DOCTYPE html>
:
如果您希望所有受支持的Internet Explorer版本以标准模式打开您的页面,请使用HTML5文档类型声明[...]
正如Ricardo解释的那样(在下面的评论中)任何DOCTYPE(HTML4,XHTML1 ......)都可用于触发标准模式,而不仅仅是HTML5的DOCTYPE。重要的是始终在页面中有一个DOCTYPE。
Clara Onager甚至注意到旧版本的Specifying legacy document modes:
边缘模式仅用于测试目的;不要在生产环境中使用它。
令人困惑的是,Usman Y认为Clara Onager在谈论:
[...]示例仅供说明之用;不要在生产环境中使用它。
<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >
嗯......在这个答案的其余部分,我给出了更多的解释,为什么使用content="IE=edge,chrome=1"
是一个很好的生产实践。
多年(2000年至2008年),IE market share was more than 80%。 IE v6被认为是事实上的标准(2003的市场份额为80%至97%,仅适用于IE6的2004, 2005 and 2006,所有IE版本的市场份额更多)。
由于IE6不尊重Web standards,开发人员必须使用IE6测试他们的网站。对于微软(MS)而言,这种情况非常好,因为网络开发人员不得不购买MS产品(例如,IE不能在不购买Windows的情况下使用),并且保持不合规更加盈利(即微软希望成为排除其他产品的标准)公司)。
因此,许多网站仅符合IE6标准,并且由于IE不符合Web标准,所有这些网站在符合标准的浏览器上都没有很好地呈现。更糟糕的是,many sites required only IE。
然而,在这个时候,Mozilla开始尽可能地尊重所有Web标准的Firefox开发(实现其他浏览器以呈现由IE6完成的页面)。随着越来越多的Web开发人员想要使用新的Web标准功能,越来越多的网站受到Firefox的支持而不是IE。
当IE市场份额下降时,MS意识到保持标准不兼容并不是一个好主意。因此MS开始发布新的IE版本(IE8 / IE9 / IE10),越来越多的Web标准。
但问题是为IE6设计的所有网站:微软无法发布与这些旧IE6设计的网站不兼容的新IE版本。 MS没有设计网站的IE版本,而是要求开发人员在其网页中添加额外的数据(X-UA-Compatible
)。
如今,IE6仍然使用(0.7% in 2016)(2014年1月为4.5%),一些互联网网站仍然是IE6兼容的。一些Intranet网站/应用程序使用IE6进行测试。某些Intranet网站仅在IE6上100%正常运行。这些公司/部门倾向于推迟迁移成本:其他优先事项,没有人不再知道网站/应用程序是如何实现的,遗留网站/应用程序的所有者破产了......
中国占2013年IE6使用量的50%,但在接下来的几年中可能会改变为Chinese Linux distribution is being broadcast。
如果您(尝试)尊重Web标准,您可以简单地始终使用http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
。要保持与旧浏览器的兼容性,请避免使用最新的Web功能:使用您要支持的最旧浏览器支持的子集。或者如果你想更进一步,你可以采用Graceful degradation,Progressive enhancement和Unobtrusive JavaScript等概念。 (您可能也很高兴阅读What should a web developer consider?。)
不要关心最好的IE版本渲染:这不是你的工作,因为浏览器必须符合web标准。如果您的网站符合标准且使用适度的最新功能,则浏览器必须符合您的网站。
此外,由于有许多活动要杀死IE6(IE6 no more,MS campaign),现在你可以避免浪费时间进行IE测试!
在2009 - 2012年,我在一家使用IE6作为官方单一浏览器的公司工作。我不得不为IE6实现一个Intranet网站。我决定尊重Web标准,但使用支持IE6的子集(HTML / CSS / JS)。
这很难,但是当公司改用IE8时,网站仍然很好,因为我使用了Firefox和firebug来检查网络标准兼容性;)
不同之处在于,如果您只指定DOCTYPE
,则IE的兼容性视图设置优先。默认情况下,无论DOCTYPE
如何,这些设置都会强制所有Intranet站点进入兼容性视图。还有一个复选框,可以为所有网站使用兼容性视图,无论DOCTYPE
如何。
X-UA-Compatible
会覆盖兼容性视图设置,因此无论浏览器设置如何,页面都将以标准模式呈现。这迫使标准模式:
单靠DOCTYPE
不能那样做;在这些情况下,无论DOCTYPE
如何,您都将处于兼容性视图模式之一。
如果同时指定了meta
标记和HTTP标头,则meta
标记优先。
这个答案是基于检查IE8,IE9和IE10中决定文档模式的完整规则。请注意,查看DOCTYPE
是决定文档模式的最后一个后备。
使用此命令强制IE隐藏地址栏中恼人的浏览器兼容性按钮:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
由于我无法在标记的答案中添加评论,我将在此处发布。
除了正确的答案,你确实可以通过验证。由于此元标记仅针对IE,因此您需要做的是添加IE条件。
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->
这样做就像添加任何其他IE条件语句一样,只适用于IE,不会影响其他浏览器。
我认为微软的这张图解释了所有。为了告诉IE如何呈现内容,!DOCTYPE必须使用X-UA兼容的元标记。 !DOCTYPE本身对更改IE文档模式没有影响。
http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png
为了完整起见,您实际上不必将其添加到HTML(在HTML5中是未知的http-equiv)
这样做,永远不要回头(apache的第一个例子,nginx的第二个例子)
Header set X-UA-Compatible "IE=Edge,chrome=1"
add_header X-UA-Compatible "IE=Edge,chrome=1";
只有一句话说Instruct Internet Explorer使用其最新的渲染引擎
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
要使此行按预期工作,请确保:
<head>
之后的第一个元素<html>
元素否则一些IE版本会忽略它。
UPDATE
这两条规则已经过简化,但很容易记住和验证。尽管MSDN文档声明您可以在此之前放置标题和其他元标记,但我不建议这样做。
How make it work with conditional comments.
Interesting article about the order of elements in the head.(blogs.msdn.com,用于IE)
参考
X-UA-Compatible
[...]必须出现在除了title元素和其他元元素之外的所有其他元素之前的网页标题(HEAD部分)中。