【问题标题】:Bad value X-UA-Compatible for attribute http-equiv on element meta元素元上属性 http-equiv 的错误值 X-UA-Compatible
【发布时间】:2012-12-21 08:07:17
【问题描述】:

我使用了与 HTML5 Boilerplate 相同的 meta,而 W3C HTML 验证器抱怨:

元素元上属性 http-equiv 的错误值 X-UA-Compatible。

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>

这个meta 标签有什么问题?

【问题讨论】:

标签: html validation x-ua-compatible


【解决方案1】:

X-UA-Compatible 不是“标准”HTML(FSVO“标准”涉及出现在规范引用的publicly editable wiki page 上)或验证器未与该 wiki 的当前状态保持同步。

在撰写本文时 (20130326) X-UA-Compatible 出现在 wiki 页面的以下部分中:“以下提议的扩展尚未符合 HTML 规范中的所有注册要求,因此尚未允许在有效文件中。”所以验证器拒绝这个值是正确的。

【讨论】:

  • 错误的 wiki 页面。您链接到的是&lt;meta name= ...。对于&lt;meta http-equiv=...,页面为wiki.whatwg.org/wiki/PragmaExtensions
  • 正确的 wiki 页面确实包含 X-UA-Compatible,因此“验证器不是最新的”替代方案适用。在这方面,甚至validator.nu(据说一般都比较新)已经过时了。
  • 感谢您的更正。我没有意识到元属性的值被分成了两页。
  • 查看我的答案,了解如何修补验证器以支持 X-UA-Compatible 的示例。 stackoverflow.com/a/21048010/1006963
  • 那么我该如何解决来自 w3c 验证器的问题..我可以删除标签吗?
【解决方案2】:

如果您希望使其在技术上有效(每个人都喜欢看到绿色图标)而不影响任何功能,您应该能够将其包装在“if IE”标签中。

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->

【讨论】:

  • 这会有效地禁用您的 Chrome 框架支持,因为 Chrome 框架会忽略 IE 条件 cmets,请参阅 jeffreybarke.net/2010/08/…
  • @JasperMoelker:可能值得一提的是,您提供的链接实际上包含 Chrome Frame 的解决方法,这非常棒:验证 + Chrome Frame 支持!
  • 不不不,这破坏了 X-UA 兼容。 xn--mlform-iua.no/blog/…
【解决方案3】:

如 Aaron Layton 在this nice write-up 中建议的那样,一种可能的解决方案是在标头中实施修复服务器端。 (所有功劳都应该归功于他,我会改写而不是抄袭...)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

“当 Internet Explorer 遇到此行时,它会将正在使用的引擎更改为首先使用 Chrome Frame,如果安装了插件,然后更改为 Edge(浏览器支持的最高文档模式)。”

步骤

  • 修复页面验证 - 只需删除标签即可实现
  • 渲染速度 – 我们无需等待浏览器看到标签然后更改模式,而是预先发送正确的模式作为响应标头
  • 确保我们只显示 Internet Explorer 的修复 - 我们将只使用一些服务器端浏览器检测并将其仅发送到 IE

要在 PHP 中添加标题,我们只需将其添加到我们的页面:

if (isset($_SERVER['HTTP_USER_AGENT']) &&
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');


或者你可以像这样将它添加到你的 .htaccess 文件中:

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>


链接到原始文章,检查 cmets 以了解可能的警告。还包括 C# 的实现。

Fix Bad value X-UA-Compatible once and for all

希望这会有所帮助!

【讨论】:

  • 在撰写本文时,此解决方案已在 HTML5BP .htaccess 文件中实现。因此,只要您的 Apache 服务器启用了 mod_headers,您就可以安全地从 html 文件中删除 &lt;meta&gt;
  • 如果你像我一样使用 Spring MVC,那么它仍然很容易做到。你正在寻找:response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");,但here is a full github gist
  • @PatrickJamesMcDougle 我必须在我的 Apache 服务器上同时启用 headerssetenvif 模组才能让它工作。
  • 添加到哪里重要吗?它应该是第一件事吗?
  • W3C HTML 验证器维护者在这里。如果您将“chrome = 1”放入值中,则此答案中的解决方案将不再起作用,因为我们已经添加了对标头的检查(以及对元元素的检查),并且根据 HTML 规范,在任一位置(元元素或标题),唯一允许的值是“IE=Edge”。
【解决方案4】:

.. 这可能是个好答案吗?

使用 PHP 设置 HTTP 标头:

这不是我自己的作品,但我希望它对其他人也有用。

【讨论】:

  • 请注意,不鼓励仅链接的答案(链接会随着时间的推移变得陈旧)。请考虑在此处编辑您的答案并添加概要。
【解决方案5】:

如果您下载/构建验证器源代码,您可以自己添加支持。

将以下内容添加到html5-meta-X-UA-Compatible.rnc等文件中)然后将其包含在html5full.rnc中。

我这样做了,它非常适合验证。

meta.http-equiv.X-UA-Compatible.elem =
  element meta { meta.inner & meta.http-equiv.X-UA-Compatible.attrs }
  meta.http-equiv.X-UA-Compatible.attrs =
    ( common.attrs.basic
      & common.attrs.i18n
      & common.attrs.present
      & common.attrs.other
      & meta.http-equiv.attrs.http-equiv.X-UA-Compatible
      & meta.http-equiv.attrs.content.X-UA-Compatible
      & ( common.attrs.aria.role.presentation
        | common.attrs.aria.role.menuitem
        )?
    )
    meta.http-equiv.attrs.http-equiv.X-UA-Compatible = attribute http-equiv {
      xsd:string {
        pattern = "X-UA-Compatible"
      }
    }
    meta.http-equiv.attrs.content.X-UA-Compatible = attribute content {
      xsd:string {
        pattern = "IE=((edge)|(EmulateIE(7|8|9|10))|7|8|9|10|11)(,chrome=(1|0))?"
      }
    }

common.elem.metadata |= meta.http-equiv.X-UA-Compatible.elem

【讨论】:

    【解决方案6】:
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    

    See this article for a possible fix

    【讨论】:

    • 请在你的回答中描述一些你的想法。
    【解决方案7】:

    请从元标记中删除,chrome=1,它将正常工作。使用验证器:

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

    【讨论】:

      【解决方案8】:

      我遇到了同样的问题,添加并围绕整条线解决了这种情况。

      <!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
      

      【讨论】:

      • 有人知道为什么被否决吗?它实际上使验证器正常工作。
      • 可能是因为它实际上并没有实现任何目标。 1. 条件cmets在IE10及以上版本不工作。 2. X-UA-Compatible 是为了让新的浏览器模仿旧的浏览器。所以这条线实际上说的是:1. IE 10 和 11,使用默认模式呈现(因为它们不再解析条件 cmets) 2. IE 9,呈现为 IE 9(即,在大多数情况下,它的默认模式)。 3. IE
      • 我还要补充一点,它使验证器“正常”工作,因为它在评论中(因此验证器会忽略它)。
      猜你喜欢
      • 2013-11-17
      • 2014-09-06
      • 2021-11-08
      • 2015-09-26
      • 2011-01-20
      • 1970-01-01
      • 2013-11-09
      • 1970-01-01
      相关资源
      最近更新 更多