现代的浏览器都支持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标签并为其设置样式的更多相关文章

  1. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  2. HTML5中的语义标签兼容IE8以及更低版本的浏览器

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

  3. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js，以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  4. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  5. 如何让旧浏览器支持HTML5新标签

    HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...

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

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

  7. split方法在低版本IE浏览器上无法解析的问题

    前一篇不知道怎么被博客园给删了,重新补发一个. 最近在项目中发现一个很诡异的问题,通过js获取cookie时,发现赋给用户name的时候IE9和低于9以下的浏览器对比时获取到的名字不一样,通过调试发现 ...

  8. 解决opacity属性在低版本IE浏览器下失效的方法

    以前,一直都以为ie9以下的版本不支持opacity属性.所以就同时使用 opacity和ie独特的filter蒙版.但是有些时候需要一些动态的效果,就比如层的渐渐消失,隐藏,就需要使用动态变化的op ...

  9. 低版本IE浏览器 input元素出现叉叉的情况

    都说是IE10之上的浏览器才有这个问题,恰巧我IE10之上都没有问题,反而是低版本的浏览器出现了这个问题.作为一个凭证,我先放一张图片在这里面. 之前无意中解决过这个问题,如今复现确实是没有解决,网上 ...

随机推荐

  1. Linux第三节整理 、增删改查、用户管理

    帮助+基本文件管理+用户管理 1.怎么查看命令帮助 ls --help man ls :查看命令/man 5 file:查看配置文件 2.基本文件管理,通过{查,建,删,改} 四个维度介绍了不同的命令 ...

  2. mybatis源码分析（一）

    mybatis源码分析(sqlSessionFactory生成过程) 1. mybatis框架在现在各个IT公司的使用不用多说,这几天看了mybatis的一些源码,赶紧做个笔记. 2. 看源码从一个d ...

  3. [编织消息框架][JAVA核心技术]annotation基础

    应用动态代理技术要先掌握annotation技术 注解是JDK1.5之后才有的新特性,JDK1.5之后内部提供的三个注解 @Deprecated 意思是“废弃的,过时的” @Override 意思是“ ...

  4. 一起学Linux02之Linux系统启动过程

    这个Linux系统启动过程啊,说实话,我认为,刚学习的时候看几遍,了解一下就好.现在的主要任务是用.熟练了之后再来深究这个不急. 下面我就简单地说说吧. Linux系统的启动主要分为下列步骤: 1 内 ...

  5. HTML学习 表格和表单

    <table></table> 表格标签            width  宽度       border  边框       cellpadding   内容和单元格之间的 ...

  6. JDK1.8中HashMap实现

    JDK1.8中的HashMap实现跟JDK1.7中的实现有很大差别.下面分析JDK1.8中的实现,主要看put和get方法. 构造方法的时候并没有初始化,而是在第一次put的时候初始化 putVal方 ...

  7. 扩充表字段长度，引发的意外KILLED/ROLLBACK

    这一段时间,因为系统升级,新系统产生的数据长度,比原来的数据长度要长,所以说要扩充一下字段长度. ) --修改字段长度sql 在执行的时候,有这样一个情况. 例如Student表的Name字段长度是n ...

  8. [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动，并在win7上远程控制

    楼主是资深技术宅(癖),由于感觉手上的老笔记本太卡,遂狠心买了个性能至强的主机同时配了个投影仪(满足躺着打代码的意淫场景).但是体验了大概一个月发现还是坐着打代码舒服,但是如下图坐着打代码总是要抬头看 ...

  9. java.lang.Exception: 资源处理失败，失败原因：com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column '?????‰' in 'where clause'

    1:Unknown column '?????‰' in 'where clause',这个问题,百度一搜,挺多的,但是貌似好像没有解决我的问题.贴一下我是如何拼接sql的.解决这个sql拼接bug的 ...

  10. Promise实现小球的运动

        Promise简要说明 Promise可以处理一些异步操作:如像setTimeout.ajax处理异步操作是一函数回调的方式;当然ajax在jQuery版本升级过程中,编写方式也有所变动. P ...