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

问题描述 投票:0回答:6

我正在构建一个在 PC 上使用的网络应用程序。为了防止 IE8 及以上浏览器出现兼容性问题,应远离哪些 HTML5 标签?

注意:大多数关于此主题的问题都是 1-3 岁时提出的。

html browser cross-browser compatibility
6个回答
100
投票

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

据我所知,HTML5 中的一些标签是出于语义原因而制作的。例如下面这样。

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

这些几乎可以很好地使用,只需要一点 CSS,例如。

display: block;
在大多数浏览器中正常工作,尽管在较旧的浏览器中,即。 Internet Explorer 您需要在 Javascript 中创建一个元素才能兼容。

这是一个例子。

document.createElement('article');

将设置

<article>
元素以在旧版 Internet Explorer 中使用。

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

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

这些元素在旧版浏览器中更难支持/shiv。虽然我在底部添加了跨浏览器填充的链接,但我还没有亲自调查过它们。

所以我想说,任何不需要 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 Polyfill 列表 - https://github.com/Modernizr/Modernizr/wiki/...

更新

正如评论中提到的

请小心元标记 X-UA-Compatible。如果您使用诸如 html5 样板之类的内容,其中元素周围有条件注释(html5 doctype IIRC 也会发生这种情况),那么您可能会遇到 IE9 强制自身进入 IE7 标准模式(即使使用标签)的问题。 IE再次来袭

你可能想调查一下,我目前没有任何证据支持这一点。


12
投票

一般都会有问题。

我被告知您的问题的措辞是询问有关 HTML 5 标签,但它也很有用 根据您可能发现或编写的任何 Javascript 查看新功能。

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

一些功能,如

local storage
,请返回 IE8。

其他,如

FileReader
,需要IE10/Firefox21/Chrome27

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


8
投票

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


4
投票

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


2
投票

2
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.