看某教程，说让HTML5的这些语义标签能够兼容低版本的浏览器，原文是“你可以设置css的display属性为block”。很好理解，就设置css样式为block嘛，那就直接设置咯：

 header, section, footer, aside, nav, main, article, figure {

     display: block;

 }
 <body>

     <header>header元素</header>

     <section>section元素</section>

     <footer>footer元素</footer>

     <aside>aside元素</aside>

     <nav>nav元素</nav>

     <main>main元素</main>

     <article>article元素</article>

     <figure>figure元素</figure>

 </body>

HTML部分

首先先看下这些语义标签在浏览器支持的时候的样式是怎么样的：

很好，看的出来是块级标签。然后我们用IE11自带的模拟旧版本IE的功能（f12，靠近右边有一个显示器和手机放在一起的图标）

我们切成IE8：

阿，是变成了内联元素。。。不对教程上不是刚刚说设置成display;block就行了，还说“此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。”。（这个时候我的理解是无法识别的它就当作是一个像<span>这种的内联元素啥的，并没有想到得先创建）

瞎折腾了半小时（不要问为啥用了半小时，回想起来只想掐死自己），搞不定。算了，先看下面的吧。"为HTML添加新元素"。我一想：是不是还得创建元素阿，写了个JavaScript创建这些HTML5中的元素：

 var newEle = new Array("header","section","footer","aside","nav","main","article","figure");

 for(var i = 0;i<10;i++) {

     document.createElement(newEle[i]);

 }

然后再运行：

成了，那我前面那半小时。。。好吧我是个沙雕。

<figure>元素跟在正常支持的浏览器中不太一样，是因为正常支持的话，<figure>还有一个style="margin:16px 40px";的样式，想要完全一样就加上这个吧。

（因为感觉自己太蠢了，之后可能会忘了，就写下来提醒自己好了┑(￣Д ￣)┍）

HTML5中的语义标签兼容IE8以及更低版本的浏览器的更多相关文章

  1. 让IE8支持html5中的video标签

    这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...

  2. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  3. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  4. 检测是否支持HTML5中的Video标签

    //检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...

  5. html5中的容器标签和文本标签

    html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...

  6. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  7. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

  8. 模拟实现兼容低版本IE浏览器的原生bind()函数功能

    模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){   Function.prototype.bind=function( ...

  9. HTML5新增的语义标签和IE版本低的兼容性问题

    <!DOCTYPE html><html> <head> <!-- HTML5中浏览器兼容(较低版本的IE浏览器不支持H5的布局):需要在<head&g ...

随机推荐

  1. scrapy_redis项目配置

    一.创建普通scrapy项目 二.spiders爬虫文件中修改项 import scrapy from XX.items import XXItem import json # ----1 导入类 f ...

  2. DevExpress v18.2新版亮点——DevExtreme篇（五）

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExtreme Complete Sub ...

  3. Thread类源码解析

    源码版本:jdk8 其中的部分论证和示例代码:Java_Concurrency 类声明: Thread本身实现了Runnable接口 Runnable:任务,<java编程思想>中表示该命 ...

  4. pytest自动化4：fixture之yield实现teardown

    出处:https://www.cnblogs.com/yoyoketang/p/9401554.html 前言: 上一篇介绍了fixture通过scope参数控制setup级别,我们一起来温故下fix ...

  5. win10切换AHCI模式

    win10切换AHCI模式 笔记本电脑总是卡卡的,开机好慢,一狠心就买了一个固态硬盘装上.听说电脑开启AHCI模式跟固态硬盘更配哦.所以好好得鼓捣了一下电脑. 保证win10开启了安全模式, 如果没有 ...

  6. float样式的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Java学习笔记(4)

    比较两个String时,用==比较两个String是否引用同一个对象,s1.equals(s2)比较两个对象的内容是否相同,也可以用s1.compareTo(s2)来确定两个String的内容是否相同 ...

  8. 最新版本汉化-PowerDesigner 16.6 汉化并河蟹

    更新日志: 2019-03-14 V1.1 1.支持反复多次汉化: 2.修复少许bug. 最新的16.6版本已经在汉化中了,基本上所有的菜单均已汉化完成,部分窗体还没有编译通过. 不过,不影响尝鲜使用 ...

  9. MySQL之命令提示符

    一.MySQL创建数据表 1.通过 mysql 命令窗口创建MySQL数据库 2.通过 mysql 命令窗口创建MySQL数据表 3.通过 mysql 命令窗口查看创建的数据表的具体信息 二.Mysq ...

  10. 王者荣耀交流协会final发布-第3次scrum立会

    1.例会照片 成员高远博,冉华,王磊,王玉玲,任思佳,袁玥出席.拍照的是王磊同学,王超同学因参加比赛不在学校,不能出席. master:任思佳 2.时间跨度 2017年12月3日 18:00 — 18 ...