方法一:手动改写。
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="/libs/html5shiv/3.7.0/html5shiv.js"></script>
方法三:终极解决方法
方法一的弊端在方法二里面已经写了。
那么方法二的弊端是当我们不在使用ie浏览器的时候,使用谷歌和火狐浏览器的时候,对应的解决兼容ie的插件也会加载。这不是我们想要的结果,所以就有了第三种终极解决方法:就是判断下是否是ie浏览器低版本:
<head><!--[if lt IE8]> // 意思就是当在ie8以及i8以下版本的ie浏览器在加载插件<script src="/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--></head>
以上就是解决h5标签在ie低版本中兼容的三种解决办法。