1.HTML5 中8个新的 HTML 语义(semantic) 元素,都是块级元素:
为了让旧版本的浏览器正确显示这些元素,设置 CSS 的 display 属性为 block :
1 header, section, footer, aside, nav, main, article, figure {display: block;}
2.自定义元素:
向 HTML 添加新的元素,并定义样式,元素名为 <myHero> 。
JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <head> 2 <script>document.createElement("myHero")</script> 3 <style> 4 myHero { 5 display: block; 6 background-color: #ddd; 7 padding: 50px; 8 font-size: 30px; 9 } 10 </style> 11 </head> 12 13 <body> 14 15 <myHero>我的第一个新元素</myHero> 16 17 </body>
3.IE浏览器兼容问题
针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。
html5shiv.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!--[if lt IE 9]> 2 <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> 3 <![endif]-->