在不支持HTML5的浏览器器中使用HTML5

原文链接https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document#%E5%9C%A8%E4%B8%8D%E6%94%AF%E6%8C%81HTML5%E7%9A%84%E6%B5%8F%E8%A7%88%E5%99%A8%E5%99%A8%E4%B8%AD%E4%BD%BF%E7%94%A8HTML5


分节和标题元素应该在大部分的不支持HTML5的浏览器中工作。尽管不支持,但不必使用特殊的DOM接口。仅仅只需要一个特殊的CSS样式,因为未知元素默认会样式化为display:inline:

section,article,aside,footer,header,nav,hgroup{

display:block

}

当然web开发者可以改变上面的样式结构,但是要记住的是在不支持HTML5浏览器中,这些元素默认的样式是与预期的样式是不同的。还要注意的是<time>元素并没有在这些元素中,因为其样式在不支持HTML5和兼容HTML5的浏览器中的表现是相同的。

然而这种方法有自己的局限性,因为一些浏览器并不允许样式化不支持的元素。这种情形出现在IE8及IE8以前的浏览器中,需要一个特殊脚本才行:

<!--[if lt IE 9]>

<script>

    document.createElement("header" );

    document.createElement("footer" );

    document.createElement("section");

    document.createElement("aside" );

    document.createElement("nav" );

    document.createElement("article");

    document.createElement("hgroup" );

    document.createElement("time" );

</script>

<![endif]-->


这段脚本表示,当在ie8(及ie8以前)的情况下,应该允许脚本的运行以合适地展示HTML5分节和标题元素。如果禁用了脚本,则不会显示,可能会出问题因为这些元素定义整个页面的结构。为了预防这种情况,我们需要加上<noscript>标签。

<noscript>

    <strong>Warning !</strong>

    Because your browser does not support HTML5, some elements are simulated using JScript. Unfortunately your browser has disabled scripting. Please enable it in order to display this page.

</noscript>

于是形成了如下的代码,允许HTML5节段和标题元素在不支持HTML5的浏览器中展示,即使是ie8(ie8以下版本)也在禁用脚本的情况下有了合适的反馈。

<!--[if lt IE 9]>

  <script>

    document.createElement("header" );

    document.createElement("footer" );

    document.createElement("section");

    document.createElement("aside"  );

    document.createElement("nav"    );

    document.createElement("article");

    document.createElement("hgroup" );

    document.createElement("time"  );

  </script>

  <noscript>

    <strong>Warning !</strong>

    Because your browser does not support HTML5, some elements are simulated using JScript.

    Unfortunately your browser has disabled scripting. Please enable it in order to display this page.

  </noscript>

<![endif]-->

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容