3

众所周知，如果没有条件 javascript 片段形式的帮助，html5 语义标签不会在低于版本 9 的 IE 中优雅地降级。 这意味着使用 IE7 并关闭 javascript 的用户会看到一些丑陋的东西，而不是你闪亮的 html5 网站。

我想到了解决这个问题的方法，并提出了以下方法：在服务器端（例如在 mvc 视图中）有以下内容：

    OutputHtml5WithFallback("<header>MyHeader</header>", "<div>MyHeader</div>");

并有一个浏览器嗅探代码来确定请求是来自 IE7 还是 IE8。如果浏览器被识别为 IE7 或 IE8，html 输出将是

    <div>MyHeader</div>

除此以外

    <header>MyHeader</header>

这似乎是一种防欺骗 - 如果任何浏览器伪装成 IE7，它将收到没有任何 html5 元素的 html5 标记。我最担心的是这种方法可能会被搜索引擎阻止（因为不同的 html 是为不同的用户代理提供的）。

您能否指出我可能遗漏的其他缺陷？

4

3 回答 3

1

您需要注意代理缓存，否则代理可能会缓存您的 IE7 页面并将其提供给更现代的浏览器，或者缓存您的 HTML5 页面并将其提供给 IE7，您的服务器将永远无法提供正确的版本。

除非您的站点已经要求您的 HTML 页面不被缓存，否则您为避免此问题所做的任何事情都会增加服务器的负载。

于 2013-02-27T01:03:49.890 回答
0

编辑：见 bfrohs 评论。毕竟，您仍然必须使用document.createElement('HTML5ElementName')才能获得正确的样式。

尽管如此，我不认为在 HTML5 退化中使用服务器端的长度是一个好主意。如果有人仍在使用 IE6/7/8 并且默认禁用 JavaScript，那么绝大多数在线页面（从 Facebook 到纽约时报）无论如何都不会对他们起作用。

在 HTML 中，未知元素（如<blah>）自动被视为内联元素。要更正旧版本的 IE，您需要将所有新的块级元素设置为display: block;，这就是 CSS 所做的：

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

这解决了旧浏览器上 99% 的 HTML5 布局问题。（其他，例如带有控件的音频和视频，可能仍需要工作或不同的回退机制才能真正有用）

于 2013-02-26T22:03:00.823 回答
0

只要您的样式不依赖于新的 HTML5 元素，您就可以毫无问题地在 IE7 中查看 HTML5。

所以你可以使用：

<header><div class="header"></div></header>

它不是很漂亮，但它可以让你免于服务器端代码。

于 2013-02-26T22:03:05.793 回答