我在一家公司工作,我们所有的网站目前都使用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>

解决方法

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

>页面>兼容性视图设置

>如果选中“在兼容性视图中显示Intranet站点”,则IE将在兼容性视图中呈现本地网络上的所有站点. (这在开发过程中发生过几次.)
>如果选中“包括来自Microsoft的更新网站列表”,则IE将从Microsoft下载网站列表并在兼容性视图中全部呈现.
>如果选中“在兼容性视图中显示所有网站”,那么,您可以猜测会发生什么.

>工具>互联网选项>高级>浏览

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

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

因此,虽然值得将X-UA-Compatible放在那里并使用类似HTML5的文档类型(这样你的意图很明确),但在测试时总是先检查这些设置.

HTML5 doctype不会触发IE8中的标准模式的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部