老式浏览器（IE6,IE7,IE8）识别html5标签

最新推荐文章于 2021-06-09 23:45:02 发布

Double崩沙卡

最新推荐文章于 2021-06-09 23:45:02 发布

阅读量5k

点赞数 1

文章标签： HTML5 语义化标签老式浏览器识别

本文链接：https://blog.csdn.net/NARUTO_LUOLUO/article/details/51314763

版权

近几年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;}即可。

好了现在老式浏览器已经可以识别这些新标签了，剩下的就靠我们随意发挥了。

Double崩沙卡

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
老式浏览器（IE6,IE7,IE8）识别html5标签

近几年HTML5风潮大起，HTML5新增的一些语义化标签，更是让前端兄贵们欢欣鼓舞。HTML5新增的标签,,,,,,,,,...and so on.就不在此一一列举了。但是像IE6,IE7,IE8这些又老又旧渲染效果又丑，让前端兄贵们恨得牙根痒痒的臭浏览器，由于一些乱七八糟的理由又不能对它们放弃治疗。当然它们不会认识这些新的语义标签。送它们一个呵呵。不就着口水干说，让我们来看看不同
复制链接

扫一扫