html5语义元素使用的注意事项(浏览器兼容性问题)

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

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

以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
    display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果,以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.

解决办法: 你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。HTML5 Shiv下载地址:

https://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js

下载后,将以下代码放入到网页中:

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 你必须将其放置于<head>元素中,因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素

猜你喜欢

转载自blog.csdn.net/Serena_tz/article/details/114024594