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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (11)

我正在建立一个网络应用程序,用于个人电脑。为了防止与IE8及以上浏览器的兼容性问题,应该远离哪些HTML5标签?

提问于
用户回答回答于

我所知道的HTML 5中的一些标签是出于语义原因而做的,例如,下面的例子。

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

这些几乎很好使用,只是需要一点CSS,例如display: block;在大多数浏览器中正常工作,即使在较旧的浏览器中。如在InternetExplorer中需要在Javascript中创建一个元素,以使其兼容。

下面是一个例子。

document.createElement('article');

设置<article>元素,以便在旧版InternetExplorer中使用。

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

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

这些元素在旧的浏览器中更难支持/支持。虽然我已经包括了一个链接,跨浏览器填充在底部,虽然我没有亲自调查他们。

任何不需要Javascript功能的元素都可以与少量跨浏览器支持代码一起使用。

如果你的目标高于IE8的版本应该没事的。

什么是旧浏览器?低于IE9的版本。

浏览器对HTML 5标记的支持是。

<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]);
}

<audio> <video> <canvas>不支持低于IE 9的版本

<embed>元素有部分支持高于IE8的版本


你还应该查看这个标签。

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

meta标签告诉InternetExplorer在最高的IE模式下显示页面,而不是进入兼容性模式并像IE7或8那样呈现页面。


用户回答回答于

我听说你的问题是关于HTML 5的标签,但是,根据可能找到或编写的Javascript来查看新特性也是有用的。

在实践中,推荐的方法是测试功能是否存在,而不是特定的浏览器。Modernizr scrip在这方面可能会有所帮助,但也有关于HTML5中无法检测的特性。

一些特性如local storage回到IE8。

其他的比如FileReader,需要IE10/Firefox 21/Chrome 27

扫码关注云+社区