我可以使用哪些HTML5标签而不必担心浏览器兼容性？

Question

我正在构建一个可在PC上使用的Web应用程序。什么是HTML5标签，以防止与IE8及更高版本等浏览器的兼容性问题？

注意：关于此主题，大多数问题都是1至3年。

Answer 1

您询问了哪些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功能的元素都可以使用一小部分跨浏览器支持代码。

如果您的定位＆gt; IE8 ，那么如果您使用shiv，则应该没问题。

我将旧版浏览器称为什么？的＆LT; 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]);
}

＆lt;不支持<audio> <video> <canvas> IE 9

<embed>元素在＆gt;中具有部分支持IE8

---

您还应该查看此标记。

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

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

---

HTML5帮助链接

---

  

对于Kick Start，您可以查看 HTML5 BoilerPlate

     

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

     

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

     

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

<强>更新

如评论中所述

  

小心使用元标记X-UA-Compatible。如果你使用像html5样板这样的东西有条件注释（这也适用于html5 doctype IIRC），你可能会遇到问题，即使使用标签，IE9也会强制进入IE7标准模式。 IE再次罢工

你可能想看看这个，我现在没有什么可以支持的。

Answer 2

一般来说，存在问题。

我被告知您的问题是关于HTML 5 标签的问题，但它也很有用 根据您可能找到或写的任何Javascript来查看新功能。

实际上，推荐的方法是测试功能是否存在 而不是特定的浏览器。 Modernizr脚本在这方面可能会有所帮助，但也有undetectable features in HTML5的报告。

某些功能如local storage会回到IE8。

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

有关最新信息，请尝试http://caniuse.com

Answer 3

像往常一样编写HTML 5并使用Shims来确保与旧版浏览器的兼容性。您只需要小心使用Javascript API，因为这些API几乎不可用。如果您试图坚持基准HTML 4以实现兼容性，那么使用HTML 5是没有意义的。

Answer 4

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

Answer 5

您正在寻找HTML5兼容性矩阵

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

Answer 6

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