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

我正在构build一个在PC上使用的Web应用程序。 什么是HTML5标签,以防止与IE8和以上浏览器的兼容性问题?

注:在这个问题上,大多数问题是1-3岁。

你问什么HTML5标签远离。

那么从我所知的HTML5中的一些标签是出于语义原因。 比如下面的例子。

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

这几乎可以使用,只需要一点CSS例如。 display: block; 在大多数浏览器中正常工作,尽pipe在较旧的浏览器中也是如此。 Internet Explorer中,您需要在Javascript中创build一个元素才能兼容。

这是一个例子。

 document.createElement('article'); 

将设置<article>元素用于较旧的Internet Explorer。

对于需要使用Javascriptfunction的更高级的HTML5标签,有些类似于以下内容。

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

这些元素在旧版浏览器中很难支持/ shiv。 尽pipe我已经在底部包含了一个跨浏览器polyfill的链接,尽pipe我没有亲自调查过它们。

所以我会说,任何不需要Javascriptfunction的元素都可以使用一点点的跨浏览器支持代码。

如果您的定位> 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 Polyfills列表 – https://github.com/Modernizr/Modernizr/wiki / …

更新

正如在评论中提到的

元标记X-UA-Compatible要小心。 如果您使用的HTML5样板文件中包含元素的条件注释(也可能发生在html5 doctype IIRC中),那么即使使用标签,您也可能会遇到IE9的问题,强制自己进入IE7标准模式。 IE再次袭击

你可能想看看这个,目前我没有什么可以支持的。

一般来说,有问题。

我被告知,你的问题的措辞是询问有关HTML 5 标签,但根据任何可能find或写入的Javascript来查看新function也是有用的。

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

local storage等一些function可以返回到IE8。

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

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

像平常一样编写HTML 5,并使用Shims来确保与旧浏览器的兼容性。 你只需要小心JavaScript API,因为这些都是不够灵活的。 如果您试图坚持基本的HTML 4兼容性,使用HTML 5没有意义。

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

此外,为了最好的跨浏览器兼容性,我build议你使用由Eric Meyer创build的reset.css。 http://meyerweb.com/eric/tools/css/reset/这使不同的浏览器到另一个元素,在所有浏览器中performance相同&#x3002;