我可以使用哪些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功能的元素都可以与一小部分跨浏览器支持代码一起使用.

如果您的定位> 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>不支持

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

您还应该查看此标记.

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

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

HTML5助手链接

对于Kick Start,您可以查看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再次罢工

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

Answer 2

一般来说,存在问题.

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

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

一些功能,如local storage回到IE8.

其他人FileReader需要IE10/Firefox21/Chrome27

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

Answer 3

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