HTML5中的语义标签兼容IE8以及更低版本的浏览器
看某教程，说让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以及更低版本的浏览器的更多相关文章
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- 认识HTML5中的新标签与新属性
前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- html5中的容器标签和文本标签
html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- 模拟实现兼容低版本IE浏览器的原生bind()函数功能
模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){ Function.prototype.bind=function( ...
- HTML5新增的语义标签和IE版本低的兼容性问题
<!DOCTYPE html><html> <head> <!-- HTML5中浏览器兼容(较低版本的IE浏览器不支持H5的布局):需要在<head&g ...
随机推荐
- C#的ArrayList与JS的push，转字符串逗号分隔
拼接字符串是常用的基本代码,但是还是有很多人习惯用"+"拼接字符串,这样做有以下缺点: 1)为了去掉尾部(或头部)分隔符,写法复杂 2)容易出现BUG报错,比如空值 C#中推荐大家 ...
- MyBatis最原始的实现curd的操作
关于jdbc的缺点: 1.数据库链接创建释放频繁造成系统资源浪费从而影响系统性能.如果使用数据库连接池可以解决此问题. 2.sql语句在代码中硬编码,不利于维护,sql变动需要改变java代码 3.使 ...
- 在过去五分钟内，TypeScript语言服务以外终止了5次
这个问题困扰了我两次...第一次重装了VS CODE 具体的原意找到之后我直接想骂娘....... 各位如果碰到这个问题....请打开你的360安全卫士!!! 注意看看您家360的防护日志有木有贴心帮 ...
- Python 语法1
函数的定义: """ def 函数名(): 函数内容,函数内容, 函数内容,函数内容, """ ////////////////////// ...
- C++入门程序作业3
/* 输出n位数据的格雷码 The gray code is a binary numeral system where two successive values differ in only on ...
- 微信小程序 获取用户信息授权
login.wxml界面 获取用户授权可以用微信提供的接口 wx.authorize, 但是获取用户信息的授权用这个接口不会弹出授权窗口 <button class="submit-b ...
- react初学之render返回加括号的问题
刚在学习react的初始阶段,跑了一段代码 var Mydom = React.createClass({ render:function(){ return <div> <inp ...
- mayavi与X11的一些坑总结
1. Mayavi:https://docs.enthought.com/mayavi/mayavi/ 适合渲染各种和图形有关的数据.在大批量处理数据时,一般不希望对每一个渲染好的对象都将其显示出来, ...
- chrome window 下的所有key josn
["postMessage","blur","focus","close","parent",&qu ...
- Vector的用法
vector容器是笔试时最经常用到的容器,它实际是一个类模板,它所具有一些成员函数我们必须熟练使用,这样才会加快编程速度. 首先加头文件并定义: #include<vector> vect ...