93

我正在构建一个用于 PC 的网络应用程序。为了防止与 IE8 及更高版本等浏览器的兼容性问题，应远离哪些 HTML5 标签？

注意：关于这个主题的大多数问题都是 1-3 岁。

4

6 回答 6

100

您询问要远离哪些 HTML5 标签。

好吧，据我所知，HTML5 中的一些标签是出于语义原因而制作的。像下面的例子。 

<article> <section> <aside> <nav> <header> <footer> ..ect

这些几乎可以使用，并且只需要一些 CSS，例如。display: block;在大多数浏览器中正常工作，尽管在较旧的浏览器中。Internet Explorer 您需要在 Javascript 中创建一个元素才能使其兼容。

这是一个例子。 

document.createElement('article');

将设置该<article>元素以在较旧的 Internet Explorer 中使用。

对于需要 Javascript 功能才能工作的更高级的 HTML5 标签，如下所示。 

<audio> <video> <source> <track> <embed> And most importantly <canvas>

这些元素在旧浏览器中更难支持/shiv。尽管我在底部包含了跨浏览器 polyfill 的链接，尽管我没有亲自调查过它们。

所以我想说，任何不需要 Javascript 功能的元素都可以与少量跨浏览器支持代码一起使用。

如果您的目标> IE8，那么使用 shiv 应该没问题。

我怎么称呼旧浏览器？< IE9

今天浏览器对 HTML5 标签的支持是。

<section>, <article>, <aside>, <header>, <footer>, 
<nav>, <figure>, <figcaption>, <time>, <mark>

小于8的 Internet Explorer 不支持，但可以这样修复。

CSS： 

section, article, aside, header, footer, nav, figure, figcaption{
   display: block;
}
time, mark { 
    display: inline-block;
}

Javascript：

var elements = ['section', 'article', 'aside', 'header', 'footer', 'nav', 'figure', 'figcaption', 'time', 'mark'];
for( var i = 0; i < elements.length; i++ ) {
    document.createElement(elements[i]);
}

并且在< IE 9<audio> <video> <canvas>中不受支持

该<embed>元素在> IE8中具有部分支持

您还应该查看此标签。

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

此meta标记告诉 Internet Explorer 以可用的最高 IE 模式显示页面，而不是像 IE7 或 8 那样进入兼容模式并呈现页面。更多关于这里的信息。

HTML5 帮助链接

要快速开始，您可以查看HTML5 BoilerPlate

对于浏览器兼容性支持表，您可以查看 - http://caniuse.com/

HTML5 Shiv - https://github.com/afarkas/html5shiv

HTML5 Polyfills 列表 - https://github.com/Modernizr/Modernizr/wiki/...

更新

如评论中所述

小心使用元标记 X-UA-Compatible。如果您使用诸如 html5 样板之类的在元素周围有条件注释的东西（这也发生在 html5 doctype IIRC 上），您可能会遇到 IE9 强制自身进入 IE7 标准模式的问题，即使使用标签也是如此。IE再次来袭

你可能想调查一下，我目前没有什么可以支持的。

于 2013-08-14T05:25:06.887 回答
12

一般都会有问题。

有人告诉我，您的问题的措辞是询问 HTML 5标签，但根据您可能找到或编写的任何 Javascript 来查看新功能也很有用。

在实践中，推荐的方法是测试功能的存在而不是特定的浏览器。Modernizr脚本在这方面可能会有所帮助，但也有报告称HTML5 中的功能无法检测。

一些功能，如local storage回到 IE8。

其他，如FileReader，需要 IE10/Firefox21/Chrome27

有关当前信息，请尝试http://caniuse.com

于 2013-08-14T05:03:24.757 回答
8

像往常一样编写 HTML 5，并使用Shims来确保与旧浏览器的兼容性。您只需要真正小心使用 Javascript API，因为它们几乎无法填充。如果您试图坚持使用基线 HTML 4 以实现兼容性，那么使用 HTML 5 是没有意义的。

于 2013-08-14T05:06:11.113 回答
4

为了快速比较哪些标签在哪些浏览器中可用，以及每个标签的支持级别，html5test.com是一个很好的资源。

于 2013-08-14T05:11:31.540 回答
2

此外，为了获得最佳的跨浏览器兼容性，我建议您使用由 Eric Meyer 创建的 reset.css。 http://meyerweb.com/eric/tools/css/reset/ 这使得不同浏览器的元素在所有浏览器中表现相同。

于 2013-09-28T22:53:11.700 回答
2

您正在寻找 HTML5 兼容性矩阵

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

于 2013-08-14T05:02:13.463 回答