如何让低版本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之上都没有问题,反而是低版本的浏览器出现了这个问题.作为一个凭证,我先放一张图片在这里面. 之前无意中解决过这个问题,如今复现确实是没有解决,网上 ...
随机推荐
- chmod 命令详解
chmod 作用:修改目录或文件权限(= 赋值不管存在与否, + 增加权限)符号链接的权限无法变更, 如果用户对符号链接修改权限, 其改变会作用在被链接的原始文件. 参数: -R: 递归修改处理 -v ...
- glibc-commons 依赖解析 版本错误，xxx is duplicate yyy
glibc-commons 安装了两个版本,导致依赖glibc-commons的很多软件包 被安装了两个版本: 解决办法就是 先清除这些重复的已安装的软件,然后执行 yum update 将 glib ...
- vue2.0的瀑布流组件-使用说明
做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...
- Git操作流程，基本命令演示
任务列表: 有一个中央库Center,和三个工作站A,B,C. 初始化时,代码存放在中央库中,A,B,C三个工作站开始工作之前都要首先从中央库克隆一份代码到本地. 第一个任务:A和B合作修复一个缺陷, ...
- thinkphp 3.1.3 redis 只能读取 无法写入的问题
找到thinkphp的目录 thinkphp\Extend\Driver\Cache 下面的Redis 大概在81行足有 // if(is_int($expire)) { // redis ...
- 正则表达过滤表单隐藏元素，组装post数据
<form name="form1" action="'.$serverUrl.'" method="post" > <i ...
- MySQL 数据类型和约束(外键是重点🙄)
数据类型 1. 数字(默认都是由符号,宽度表示的是显示宽度,与存储无关).tinyint 括号里指定宽度 七位2进制数最大数就是2**7 -1=127 最小是-128 验证: create tabel ...
- 如何复制Google浏览器的控制台内容
今天在调用第三方的接口,对着文档,传参数,老是报参数错误,没办法只能把参数打印出来看看,在Google控制台上看,费劲,就想复制出来,格式化一下,然后对着文档进行对比. console.info(JS ...
- [: 11: y: unexpected operator问题
<私房菜>上的shell脚本问题: 转载:[: 11: y: unexpected operator问题 脚本如下:% #!/bin/bash # Program: # This prog ...
- 常用base.css
ul { list-style: none;}a { text-decoration: none;} body,h1,h2,h3,h4,h5,h6,p,ul,ol,form { margin: 0; ...