Question

我在一家公司工作，我们所有的网站目前都使用XHTML 1.0过渡文档类型（是的，我知道这是非常古老的学校）。我想将它们全部更改为使用HTML5 doctype，因为它向后兼容。我想要进行切换的原因之一是因为在IE8中如果有人安装了开发人员工具，那么旧的XHTML doctype会将浏览器切换到兼容模式并将页面呈现为IE7。通过阅读，我被认为HTML5文档类型将设置任何页面以标准模式呈现，但是当我在我们的临时服务器上测试时它仍然没有发生，它仍然会转换到IE7渲染模式。

奇怪的是，如果我在本地保存带有HTML5 doctype的页面并打开它，它将以IE8标准模式呈现。必须有其他东西导致它放入兼容性IE7渲染。任何想法可能是什么？

以下是我一直关注的测试页面的负责人：

    <!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

    <title>Burton - Mens Clothing - Mens Fashion - Burton Menswear</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="description" content="Burton is one of the UK's leading men's clothing &amp; fashion retailers, with a range of men's clothing designed to make you look &amp; feel good. Find formal &amp; casual clothes &amp; accessories for men online at Burton menswear"/>
    <meta name="keywords" content="menswear, clothes for men, clothing for men, men clothes, men's fashion, men's wear, men's clothing online, men's clothes online, men's clothes shop, burton men's, burton menswear, burton uk, burton"/>

    <script type="text/javascript">document.getElementsByTagName('html')[0].className = 'js';</script>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/screen.css" />
    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/print.css" media="print"/>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/brand.css" />

    <!--[if lt IE 8]>
    <link rel="stylesheet" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->

    <meta http-equiv="content-language" content="en-gb" />

    <link rel="shortcut icon" type="image/x-icon" href="http://eu.burton-menswear.com/favicon.ico" />
    <link rel="search" type="application/opensearchdescription+xml" title="burton.co.uk Search"  href="http://eu.burton-menswear.com/burton-search.xml"/>
    <!-- Start Summit Tag -->
    <script type="text/javascript"> 
  var __stormJs = "t1.stormiq.com/dcv4/jslib/3286_D92B7532_4A18_46A8_864A_5FDF1DF25844.js";
</script>
    <script type="text/javascript" src="http://eu.burton-menswear.com/javascript/track.js"></script>
    <!-- End Summit Tag -->
    <!-- Start QuBit Tag -->
    <script src=//d3c3cq33003psk.cloudfront.net/opentag-31935-42109.js async defer></script>
    <!-- End QuBit Tag -->
    <link type="text/css" rel="stylesheet" href="http://reviews.br.wcstage.arcadiagroup.ltd.uk/bvstaging/static/6028-en_gb/bazaarvoice.css" ></link>

</head>

Answer 1

IE 8中有一些设置可以导致页面在兼容模式下呈现，无论页面的HTML内容或HTTP标头如何：

Page＆gt;兼容性视图设置
- 如果选中“在兼容性视图中显示Intranet站点”，则IE将在兼容性视图中呈现本地网络上的所有站点。（这在开发过程中发生过几次。）
- 如果选中“包括Microsoft的更新网站列表”，则IE将从Microsoft下载网站列表，并在兼容性视图中全部呈现。
- 如果选中“在兼容性视图中显示所有网站”，那么，您可以猜测会发生什么。
工具＆gt;互联网选项＆gt;高级＆gt;浏览
- 如果选中“使用兼容性视图自动从页面布局错误中恢复”，那么如果IE认为页面的布局已损坏，IE有时会切换到兼容性视图。
最后，如果您导航到某个页面，然后点击页面＆gt;兼容性视图（或单击地址栏中的兼容性视图图标），然后该页面将在兼容性视图中呈现。

所以，尽管值得将X-UA-Compatible放在那里并使用类似HTML5的文档类型（以便明确表达您的意图），但在测试时请务必先检查这些设置。

Answer 2

我不确定这是否有帮助，但在 IE9 中，您必须使用：

<!DOCTYPE html>

以及以下元标记：

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

在测试了这两者的组合后，我发现了这些：

没有Doctype或Meta标签：
Quirks Mode，IE Engine = 5
仅限Doctype：
标准模式，IE Engine = 7
Doctype和Meta Tag
标准模式，IE Engine = 9
仅限元标记
标准模式，IE Engine = 9

如何确定模式类型和引擎：

document.compatMode：CSS1Compat =标准模式，否则您处于怪癖模式
document.documentMode：返回IE用于呈现文档的引擎

注意：

通常，Doctype必须是文件中的第一行。我不确定，但我认为XML标签可以在它之前。如果还有其他任何事情你可能会破坏你的doctype声明：
元标记必须放在<HEAD>
你的帖子是25天，所以我假设你有一个解决方案。即便如此，我也不确定这些IE9设置是否适合您的问题。您必须检查window.document.compatMode和window.document.documentMode以确定它们在IE8下是否可行
将元标记更改为<meta http-equiv="X-UA-Compatible" content="IE=8">
尽管可以只使用元标记，但我不建议在没有doctype的情况下使用它。因为这可能会导致XML，CSS和脚本

我花了好几个小时试图解决这个问题并发表这篇文章，所以我希望有人能从我的研究中得到一些帮助。愿来源与你同在......

Answer 3

XHTML 1.0 Transitional文档类型（当使用规范时，使用URL）和<!doctype html>触发IE中的“标准模式”。如果没有发生这种情况，可能有很多原因可能与doctype更改无关（只有在其他信息（如URL）可用时才能进行分析）;请参阅使用Doctype 激活浏览器模式中的IE 8 and IE 9 complications。

更改为<!doctype html>是没有意义的，也是一个潜在的问题，除非您实际上没有更改标记。在验证中，这是使用doctype的另一个原因，它会导致完全不同的分析，并且经常会出现有关在XHTML 1.0中有效的构造的错误消息。

HTML5 doctype不会触发IE8中的标准模式

3 个答案: