1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 解决html5语意标签在IE低版本浏览器下的兼容问题:

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

时间:2023-04-12 02:08:43

相关推荐

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

方法一:手动改写。

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低版本中兼容的三种解决办法。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。