【问题标题】:Which HTML5 tags can I use without worrying about browser compatibility?我可以使用哪些 HTML5 标签而不用担心浏览器的兼容性?
【发布时间】:2013-08-15 22:07:42
【问题描述】:

我正在构建一个用于 PC 的网络应用程序。为了防止与 IE8 及更高版本等浏览器的兼容性问题,应远离哪些 HTML5 标签?

注意:关于这个主题的大多数问题都是 1-3 岁。

【问题讨论】:

  • 查看caniuse.comhtml5please.com 以获取最新的浏览器兼容性信息。
  • @deceze 有任何链接可以了解有关垫片的更多信息吗?
  • HTML5 Boilerplate 是个好资源
  • 恕我直言,您不能在 Web 开发中使用任何东西而不担心浏览器兼容性...
  • The three levels of HTML5 usage。 1级的东西可以毫无问题地使用。 2 级功能优雅降级。如果对旧版浏览器的支持是一个问题,那么第 3 级功能需要一个 polyfill。

标签: html browser cross-browser compatibility


【解决方案1】:

【讨论】:

  • 请注意:“由于信息过时,本文的事实准确性可能会受到影响。请更新本文以反映最近的事件或新的可用信息。(2013 年 3 月)”
  • 是的,这可能是真的,但总的来说 google html5 compatability 我敢肯定有很多资源。
【解决方案2】:

一般来说,有问题。

有人告诉我,您的问题措辞是针对 HTML 5 标签,但它也很有用 根据您可能找到或编写的任何 Javascript 来查看新功能。

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

local storage 等一些功能会回到 IE8。

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

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

【讨论】:

  • 必须注意localStorage & fileReader不是HTML标签,OP询问了哪些HTML5标签有兼容性问题。
  • 哦,是的。在 HTML5 中推送了一大堆语义标签,以使您的页面更具机器可读性,并且可能对 SEO 更友好[或者可能不是]。有一些新的输入元素。我想其中一些可能在一个或多个浏览器中存在问题。我认为 caniuse 可能有这些信息......
【解决方案3】:

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

【讨论】:

  • 我很乐意将<!DOCTYPE html> 用作顶线,而不是以前强加给我们的那些该死的又长又丑的东西。
  • 如果这是您的 HTML 4 和“HTML 5”文档之间唯一的变化……那有什么意义呢? :)
【解决方案4】:

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

【讨论】:

    【解决方案5】:

    你问过哪些 HTML5 标记要远离。

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

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

    这些几乎都可以使用,并且只需要一点 CSS,例如。 display: block; 在大多数浏览器中正常工作,但在旧浏览器中。 Internet Explorer 您需要在 Javascript 中创建一个元素才能使其兼容。

    这是一个例子。

    document.createElement('article');
    

    将设置 &lt;article&gt; 元素以在旧版 Internet Explorer 中使用。

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

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

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

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

    如果您的目标是 >IE8,那么使用 shiv 应该没问题。

    什么叫旧版浏览器?

    目前浏览器支持 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]);
    }
    

    不支持&lt;audio&gt; &lt;video&gt; &lt;canvas&gt;

    &lt;embed&gt; 元素在 > IE8

    中有部分支持

    你也应该看看这个标签。

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

    meta 标记告诉 Internet Explorer 以可用的最高 IE 模式显示页面,而不是进入兼容模式并像 IE7 或 8 那样呈现页面。更多信息Here


    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 样板之类的东西,其元素周围有条件 cmets(html5 doctype IIRC 也会发生这种情况),您可能会遇到 IE9 强制自身进入 IE7 标准模式的问题,即使使用标签也是如此。 IE又来了

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

    【讨论】:

    • 另外,如果可以指定,什么是旧版 IE? 6,7,8?
    • 一般旧版IE是
    • 小心使用元标记 X-UA-Compatible。如果您使用类似 html5 样板的东西,它在 &lt;html&gt; 元素周围有条件 cmets(html5 doctype IIRC 也会发生这种情况),您可能会遇到problems,IE9 会强制自己进入 IE7 标准模式,即使使用标签也是如此。 IE 再次来袭。
    • 感谢您的信息,我可以添加到有关该问题的答案中的任何博客文章或一些信息都会很好:)
    【解决方案6】:

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

    【讨论】:

      猜你喜欢
      • 2016-07-03
      • 2012-04-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-25
      • 2012-05-18
      • 1970-01-01
      相关资源
      最近更新 更多