老式浏览器(IE6,IE7,IE8)识别html5标签
近几年HTML5风潮大起,HTML5新增的一些语义化标签,更是让前端兄贵们欢欣鼓舞。
HTML5新增的标签<header>,<footer>,<nav>,<hgroup>,<article>,<section>,<aside>,<audio>,<vedio>,<canvas>...and so on.就不在此一一列举了。
但是像IE6,IE7,IE8这些又老又旧渲染效果又丑,让前端兄贵们恨得牙根痒痒的臭浏览器,由于一些乱七八糟的理由又不能对它们放弃治疗。当然它们不会认识这些新的语义标签。
送它们一个呵呵。
不就着口水干说,让我们来看看不同新浏览器与老式浏览器下对和html5语义标签的渲染效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style type="text/css">header{color: red;}footer{color: green;}
</style>
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
我最爱的chrome下:
万德福~~~
IE8下的效果:
但是,前端兄贵们还是想出了对付他们的办法。
前端大神们发现在渲染前使用document.createElement创建它们,可以使那些冥顽不灵的浏览器识别它们。
当浏览器版本 < IE 9 时,追加script代码段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<style type="text/css">header {color: red;}footer {color: blue;}
</style>
<!--[if lt ie 9]>
<script type="text/javascript">var i = 0, html5tags = ["header", "footer", "nav", "aside", "article", "section"];for (i in html5tags) {document.createElement(html5tags[i]);}
</script>
<![endif]-->
</head>
<body>
<header>header</header>
<footer>footer</footer>
</body>
</html>
看看IE8下的效果:
至于在老式浏览器下,这些新语义标签被渲染成行内元素的情况,按需要为它们添加样式{display: block;}即可。
好了现在老式浏览器已经可以识别这些新标签了,剩下的就靠我们随意发挥了。
老式浏览器(IE6,IE7,IE8)识别html5标签相关推荐
- 如何让IE6/IE7/IE8支持HTML5标签
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- IE6 IE7 IE8 IE9 IE10 Css hack及IE条件注释法
IE浏览器的csshack写法和IE条件注释语句 IE css hack 网络上有很多针对IE的css hack写法,但很多都缺乏实际的实战经验,今天我把我测试的结果来给大家分享下,注意:你们最好还是 ...
- IE6 IE7 IE8(Q) 不支持 JSON 对象
标准参考 JSON 是一种数据交换格式,RFC 4627 对 JSON 进行了详细描述. 根据 ECMA-262(ECMAScript)第 5 版中描述,JSON 是一个包含了函数 parse 和 s ...
- SD9001: IE6 IE7 IE8(Q) 中的 getElementById 方法能以 name 属性为参数获取某些元素
问题: IE11中暴露 getElementById 有时候可以取name值,有时候可以去id值 解答如下: 标准参考 getElementById 是 Document 接口提供的方法,用于获取一个 ...
- php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5),识别html5标签: html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
- [转]完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header&g ...
- IE(IE6/IE7/IE8)支持HTML5标签--20150216
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表
IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观.本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版 ...
- 完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法
完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的方法 参考文章: (1)完美解决header,footer等HTML5标签在IE(IE6/IE7/IE8)无效的 ...
最新文章
- C4D中重点、难点分析
- 山景智能创始人黄勇:银行要从数据智能转向业务智能,今天的金融服务难以支撑未来 | MEET2021...
- 网络暴力信号:你家的青少年是受害者或加害者吗?
- RHEL5上Oracle9i的安装
- VB创建超链接 打开指定网站的几种方法
- ZYNQ研究----(2)基于开发板制作串口测试程序
- 软考高项-质量管理论文范文
- DateUtil整理
- Arch报错日志ACPI BIOS Error (bug): Failure creating named object“INFO: task kworker/2:1H:107 blocked“
- 【亲测有效】快速简单解决apple Ipad无法配对apple pencil问题
- 数据分析处理快速上手教程matplotlib+numpy+pandas(基础讲解)
- twitter api java使用_twitter api问题
- WinDbg实践--入门篇
- adb 详细使用文档
- 2:人民币与美元汇率兑换程序
- android 仿微信demo————登录功能实现(服务端)
- 计算机三维制图论文,三维重建初探(整理的一些资料及论文分享)
- java程序员的转正述职ppt
- VSCode STM32跨平台开发环境搭建
- java将汉字转成拼音首字母大写字母_Java 将汉字转换为拼音并取首字母大写