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

El *_*apo 6 html html5 doctype internet-explorer-8 ie8-compatibility-mode

我在一家公司工作,我们所有的网站目前都使用XHTML 1.0过渡文档类型(是的,我知道它是非常古老的学校).我想将它们全部更改为使用HTML5 doctype,因为它向后兼容.我想要进行切换的原因之一是因为在IE8中如果有人安装了开发人员工具,那么旧的XHTML doctype会将浏览器切换到兼容模式并将页面呈现为IE7.从阅读开始,我开始相信HTML5 doctype将设置任何页面以标准模式呈现,但是当我在我们的临时服务器上测试它时,它仍然没有发生,它仍然会转换为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>
Run Code Online (Sandbox Code Playgroud)

Pau*_*ite 16

IE 8中有几个设置可以导致页面在兼容模式下呈现,无论页面的HTML内容或HTTP标头如何:

  1. 页面>兼容性视图设置

    • 如果选中"在兼容性视图中显示Intranet站点",则IE将在兼容性视图中呈现本地网络上的所有站点.(这在开发过程中发生过几次.)

    • 如果选中"包括来自Microsoft的更新网站列表",则IE将从Microsoft下载网站列表并在兼容性视图中全部呈现.

    • 如果选中"在兼容性视图中显示所有网站",那么,您可以猜测会发生什么.

  2. 工具> Internet选项>高级>浏览

    • 如果选中"使用兼容性视图自动从页面布局错误中恢复",则IE有时会在认为页面布局中断时切换到兼容性视图.

  3. 最后,如果您导航到某个页面,然后单击"页面">"兼容性视图"(或单击地址栏中的兼容性视图图标),则该页面将在兼容性视图中呈现.

因此,尽管值得投入X-UA-Compatible并使用类似HTML5的文档类型(以便明确表达您的意图),但在测试时请务必先检查这些设置.


小智 8

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

<!DOCTYPE html>
Run Code Online (Sandbox Code Playgroud)

和以下元标记:

<meta http-equiv="X-UA-Compatible" content="IE=9">
Run Code Online (Sandbox Code Playgroud)

在测试了这两者的组合后,我发现了以下内容:

  • 没有Doctype或Meta标签:
    Quirks Mode,IE Engine = 5

  • 仅限Doctype:
    标准模式,IE引擎= 7

  • Doctype和元标记
    标准模式,IE引擎= 9

  • 仅限元标记
    标准模式,IE引擎= 9

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

  • document.compatMode:CSS1Compat=标准模式,否则你处于怪癖模式

  • document.documentMode:返回引擎IE用于呈现文档的引擎


笔记:

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

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

  • 您可以使用HTTP标头而不是`<meta http-equiv ="X-UA-Compatible"content ="IE = 9">`,如果您能够实现它,这可能是一个好主意,因为[元标记和条件注释可能会导致彼此的问题](https://github.com/h5bp/html5-boilerplate/issues/1187). (2认同)