解决html5语意标签在IE低版本浏览器下的兼容问题：

最新推荐文章于 2022-08-18 08:26:37 发布

M'r白墙

最新推荐文章于 2022-08-18 08:26:37 发布

阅读量308

点赞数

分类专栏： HTML总结文章标签：解决html5语意标签在IE低版本浏览器下的兼容问题：

本文链接：https://blog.csdn.net/baiqiangdoudou/article/details/99705783

版权

HTML总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

方法一：手动改写。
1、在body中写入h5语意标签,这里用nav标签举例子：<nav></nav>
2、在js中手动创建h5的语意标签：document.createElement("nav");
3、在样式中必须要将h5的语意标签变成块元素，在ie低版本中，识别出的h5标签是行元素，所以要手动的将其变成块元素。nav{ height:200px; background:red; display:block; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
		nav{
			height:200px;
			background:red;
			display:block;
		}
	</style>
</head>
<body>
  	<nav></nav>
	<script>
		document.createElement("nav")
	</script>
</body>
</html>

方法二：利用插件
方法一的弊端是每次我们使用h5的语意标签我们都要手动的去兼容ie，每写一个都要手动创建一个元素。所有就出现了ie兼容h5标签的插件：html5shv.js。只需要在页面引入这个插件就可以了，就不需要我们手动去创建了。

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

方法三：终极解决方法
方法一的弊端在方法二里面已经写了。
那么方法二的弊端是当我们不在使用ie浏览器的时候，使用谷歌和火狐浏览器的时候，对应的解决兼容ie的插件也会加载。这不是我们想要的结果，所以就有了第三种终极解决方法：就是判断下是否是ie浏览器低版本：

<head>
	<!--[if lt IE8]>   // 意思就是当在ie8以及i8以下版本的ie浏览器在加载插件
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<![endif]-->
</head>

以上就是解决h5标签在ie低版本中兼容的三种解决办法。

M'r白墙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决html5语意标签在IE低版本浏览器下的兼容问题：

方法一：手动改写。1、在body中写入h5语意标签,这里用nav标签举例子：<nav></nav>2、在js中手动创建h5的语意标签：document.createElement("nav");3、在样式中必须要将h5的语意标签变成块元素，在ie低版本中，识别出的h5标签是行元素，所以要手动的将其变成块元素。nav{ height:200px; backg...
复制链接

扫一扫