logo标签列表

哪些HTML5标签可以在不担心浏览器兼容性的情况下使用？

htmlbrowsercross-browsercompatibility
93

我正在开发一款用于电脑使用的网页应用程序。有哪些HTML5标签需要避免使用以防止与诸如IE8及以上的浏览器兼容性问题？

注意： 大多数关于此主题的问题都是1-3年前提出的。

48
请查看 http://caniuse.com 和 http://html5please.com 获取最新的浏览器兼容性信息。 - rink.attendant.6
@deceze 有关 shims 的更多了解链接吗？ - Swagg
4
HTML5 Boilerplate是一个很好的资源。 - Michael Peterson
47
在我的看法中，进行网站开发时不能不考虑浏览器兼容性问题，否则无法使用任何东西。 - Uooo
2
请查看HTML5使用的三个级别。第一级别的功能可以毫无问题地使用。第二级别的功能会优雅降级。如果需要支持旧版浏览器，则第三级别的功能需要使用polyfill。 - Mathias Bynens
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>

这些元素在旧版浏览器中的支持/兼容性较差。虽然我在底部包含了一个跨浏览器的polyfill链接，但我个人没有进行过调查。

因此，我认为任何不需要JavaScript功能的元素都可以使用一小段跨浏览器支持代码来完美地实现。

如果你的目标是>IE8，那么使用shiv应该也没有问题。

我所说的旧版浏览器是什么？< IE9

今天对HTML5标签的浏览器支持情况如下。

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

Internet Explorer 8及以下版本不支持此功能，但可以通过以下方法进行修复。

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> 标签。

> IE8 对 <embed> 标签有部分支持。

你也应该了解这个标签。

 <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补丁列表 - https://github.com/Modernizr/Modernizr/wiki/...

更新

如评论所述

请注意元标记X-UA-Compatible。如果使用像html5 boilerplate这样的东西，它会在元素周围放置条件性注释（我IRC也是使用HTML5 doctype），即使带有标签，您也可能会遇到IE9强制自身进入IE7标准模式的问题。 IE再次出现问题

您可能需要研究一下这个问题，我目前没有任何支持。

另外，如果您能够指定，什么是旧版IE？6、7、8？ - Swagg
4
一般来说，旧版IE是指IE9以下的版本。 - iConnor
请注意 meta 标签 X-UA-Compatible。如果您使用类似于 html5 boilerplate 的东西，该东西围绕 <html> 元素有条件注释（这也发生在 html5 doctype 中，如果我没记错的话），则可能会遇到问题，即使有标签，IE9 仍会强制将自己置于 IE7 标准模式中。IE 又来捣乱了。 - cheezone
谢谢提供信息，如果有任何博客文章或相关信息可以添加到答案中，那就太好了 :) - iConnor
12

一般来说，会存在问题。

我被告知你的问题是关于HTML 5标签，但也有必要考虑一下在任何你可能找到或编写的Javascript方面的新功能。

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

某些功能（如本地存储）可以追溯到IE8。

而其他功能（如FileReader）则需要 IE10/Firefox21/Chrome27 等版本。

如需最新信息，请尝试访问http://caniuse.com

1
我必须指出，localStorage和fileReader不是HTML标签，OP问的是哪些HTML5标签存在兼容性问题。 - iConnor
哦，没错。在HTML5中，有一个大型的语义标签列表被推广为一种使您的页面更易于机器阅读和可能更友好于SEO的方式[或者也许不是]。还有一些新的输入元素。我想其中一些可能会在一个或多个浏览器中出现问题。我认为caniuse可能会提供这方面的信息... - Paul
8

像平常一样编写HTML 5，并使用Shims确保与旧版浏览器的兼容性。你只需要注意JavaScript API，因为这些几乎无法进行填充。如果您尝试为了兼容性而坚持使用基本的HTML 4，那么使用HTML 5就没有意义。

7
我很乐意在代码顶部使用 <!DOCTYPE html> 而不是以前那些长得丑陋而又麻烦的东西。 - Paul
如果这是你的HTML 4和“HTML 5”文档之间唯一的区别...那还有什么意义呢？ :) - deceze
4

如果您想快速比较浏览器中可用的标签及每个标签的支持水平，html5test.com 是一个非常好的资源。

2
2
请注意：“本文的事实准确性可能会因过时信息而受到影响。请更新本文以反映最近的事件或新的可用信息。（2013年3月）” - gersande
1
是的，这可能是真的，但总的来说，搜索一下“html5兼容性”在谷歌上，我相信会有很多资源。 - bradgonesurfing
2
此外，为了获得最佳的跨浏览器兼容性，我建议您使用Eric Meyer创建的reset.css。 http://meyerweb.com/eric/tools/css/reset/ 这个可以使不同浏览器之间差异的元素在所有浏览器中表现相同。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接