我正在构建一个在 PC 上使用的网络应用程序。为了防止 IE8 及以上浏览器出现兼容性问题,应远离哪些 HTML5 标签?
注意:大多数关于此主题的问题都是 1-3 岁时提出的。
您询问要远离哪些 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再次来袭
你可能想调查一下,我目前没有任何证据支持这一点。
一般都会有问题。
我被告知您的问题的措辞是询问有关 HTML 5 标签,但它也很有用 根据您可能发现或编写的任何 Javascript 查看新功能。
在实践中,推荐的方法是测试该特征是否存在 而不是特定的浏览器。 Modernizr 脚本在这方面可能会有所帮助,但也有报告称 HTML5 中无法检测到的功能。
一些功能,如
local storage
,请返回 IE8。
其他,如
FileReader
,需要IE10/Firefox21/Chrome27
有关当前信息,请尝试 http://caniuse.com
像平常一样编写 HTML 5 并使用 Shims 确保与旧版浏览器的兼容性。您实际上只需要小心 Javascript API,因为它们几乎无法进行填充。如果您试图坚持使用基线 HTML 4 来实现兼容性,那么使用 HTML 5 就没有意义。
要快速比较哪些标签在哪些浏览器中可用,以及每个标签的支持级别,html5test.com是一个很好的资源。
您正在寻找 HTML5 兼容性矩阵
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
另外,为了获得最佳的跨浏览器兼容性,我建议您使用 Eric Meyer 创建的这个 Reset.css。 http://meyerweb.com/eric/tools/css/reset/ 这使得不同浏览器中不同的元素在所有浏览器中表现相同。