如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5，HTML5定义了 8 个新的 HTML 语义元素。所有这些元素都是 块级 元素。
为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
然而低版本IE浏览器并不支持这些HTML5元素，如：
<style>
header{
display: block;
background-color: red;
}
</style>
</head>
<body>
<header>hello world!</header>
</body>
我们都知道这里应该实现的效果是所有浏览器下的header元素都是块元素且背景色为红色，然而，事与愿违，低版本IE浏览器（IE8及以下）并不能实现预期的效果，虽然能显示header元素里的内容，但是为其设置的样式并不起作用，很显然，低版本IE浏览器不支持，那么，应该如何让低版本IE浏览器支持HTML5元素呢？
这里，还是以这个为例，很简单，只需要使用JavaScript 语句 document.createElement("header") 即可让低版本 IE 浏览器支持新的元素。代码如下：
<script>
var header = document.createElement("header");
</script>
<style>
header{
display: block;
background-color: red;
}
</style>
</head>
<body>
<header>hello world!</header>
</body>
脚本与样式表顺序可颠倒放置。
到这里，低版本IE浏览器就可以支持html5元素了。
更简单的方法是使用HTML5 shiv来解决。
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
以上代码意思是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
如何让低版本IE浏览器支持HTML5标签并为其设置样式的更多相关文章
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- HTML5中的语义标签兼容IE8以及更低版本的浏览器
看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...
- 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 模拟实现兼容低版本IE浏览器的原生bind()函数功能
模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){ Function.prototype.bind=function( ...
- split方法在低版本IE浏览器上无法解析的问题
前一篇不知道怎么被博客园给删了,重新补发一个. 最近在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现 ...
- 解决opacity属性在低版本IE浏览器下失效的方法
以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...
- 低版本IE浏览器 input元素出现叉叉的情况
都说是IE10之上的浏览器才有这个问题,恰巧我IE10之上都没有问题,反而是低版本的浏览器出现了这个问题.作为一个凭证,我先放一张图片在这里面. 之前无意中解决过这个问题,如今复现确实是没有解决,网上 ...
随机推荐
- css3特效样式库
直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
- Generation Axe 吉他之夜音乐会-广州站 感受
本人第一次看音乐会,演唱会跟音乐会是有区别的哈,演唱会以表演.舞蹈.歌唱为主,还有很多特别嘉宾 演出时间: 从20点开始一直到23点多才结束,有五个吉他手,开场跟结束五个吉他手一齐演出.平均每个人表演 ...
- webpack3.x基本配置与总结
基本配置 1.开始之前,请确定你已经安装了当前 Node 的较新版本. 2.然后在文件夹根目录下执行以下命令初始化项目并全局安装webpack: 1.$ cnpm init // 初始化项目 2.$ ...
- 任务调度 -----> quartz 不同时间间隔调度任务
Quartz Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运 ...
- 房上的猫：for循环，跳转语句与循环结构，跳转语句进阶
一.for循环 1.定义: for循环语句的主要作用是反复执行一段代码,直到满足一定条件为止 2.组成部分: (1)初始部分:设置循环的初始状态 (2)循环体:重复执行的代码 (3)迭代部分: ...
- MySQL如何找到表与表之间的关系?
如何找到两张表之间的关系? 先站在左表的角度上去找,如果可以找到左表的多个字段可以对应右表的一个字段,那么左表的一个字段foregin key右表的一个字段.一般情况下为id... 2.如果右表的多个 ...
- SegmentFault错误汇总
在三个月的工作中,经常碰到SegmentFault的错误,有时候是因为计算集群问题导致,更多的时候是程序本身的问题,我计划将之后碰到的SegmentFault整合起来,一来方便日后查看,二来如果能帮助 ...
- 微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
- jQuery基础 (四)——使用jquery-cookie 实现点赞功能
jquery-cookie 下载地址:https://github.com/carhartl/jquery-cookie 直接上代码 html <span class="jieda-z ...
- Heroku登录失败
Heoku 在国内,注册和登录是个大问题,不知道原来怎么注册上了,如今需要登录删除 app 就是删除不了.. 今天努力找了个vpn ,无奈还是登录不成功.https://id.heroku.com/l ...