回顾一下兼容ie的方法（虽然ie已经被放弃了）

最新推荐文章于 2022-06-13 15:45:51 发布

beyoungod

最新推荐文章于 2022-06-13 15:45:51 发布

阅读量327

点赞数

文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/beyoungod/article/details/109470079

版权

回顾一下兼容ie的方法（虽然ie已经被放弃了）

11月起，微软将强制IE退休，部分URL网址将无法透过IE打开，但是也不确定会不会再遇到兼容ie的需求，想起为了兼容ie而做的各种各样的兼容，还是忍不住想吐槽

html兼容方法

相信各位偶尔无聊打开某些网站的代码，会看到这样的标签：

//兼容ie7以下
<!--[if lt IE 7 ]>
<html class="ie6" lang="zh-cn">
<![endif]-->
//兼容ie7
<!--[if IE 7 ]>
<html class="ie7" lang="zh-cn">
<![endif]--> 
//兼容ie8
<!--[if IE 8 ]>
<html class="ie8" lang="zh-cn">
<![endif]--> 
//兼容ie9
<!--[if IE 9 ]>
<html class="ie9" lang="zh-cn"><![endif]--> 
//兼容ie9以上或者非ie内核
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="" lang="zh-cn">
<!--<![endif]-->

是的这就是HTML的标签ie兼容，通过注释判断做的，在不同版本的ie上其他的注释判断代码不会被解析。大家可以试试，很有意思，也很恶心，哈哈哈哈哈

css兼容方法

css的兼容可以通过上面的注释渲染做：如

//兼容ie7以下
<!--[if lt IE 7 ]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
//兼容ie7
<!--[if IE 7 ]>
<link rel="stylesheet" href="ie7-up.css">
<![endif]--> 
//兼容ie8
<!--[if IE 8 ]>
<link rel="stylesheet" href="ie8.css">
<![endif]--> 
//兼容ie9
<!--[if IE 9 ]>
<link rel="stylesheet" href="ie9.css">
//兼容ie9以上或者非ie内核
<!--[if (gt IE 9)|!(IE)]><!-->
<link rel="stylesheet" href="ie9-up.css">
<!--<![endif]-->

当然也可以通过在css属性里加东西来做：如

color:red;//一般浏览器识别，字体颜色为红
color:blue \9;//IE8,IE9及以上版本识别，字体颜色为蓝
*color:orange;//IE7识别，字体颜色为橘色
_color:black;//IE6识别，颜色为黑

不过你也可以这样写：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
     css代码

}

二，支持IE9及以上

@media screen and (min-width:0\0)  {
     css代码

}

三，支持IE8及以上

@media screen\0 {
     css代码

}

四，仅支持IE8

@media \0screen {
     css代码

}

五，支持IE8及以下

@media \0screen\,screen\9 {
     css代码

}

六，支持IE7及以下

@media screen\9 {
     css代码

}

七，仅支持谷歌

@media screen and (-webkit-min-device-pixel-ratio:0) {
     css代码

}

通过css媒体查询的方法，写对应的样式

js兼容方法

同上css的兼容，js也可以使用注释判断的方法：

//兼容ie7以下
<!--[if lt IE 7 ]>
 <script src="ie7.js<.script>
<![endif]-->
//兼容ie7
<!--[if IE 7 ]>
 <script src="ie7-up.js<.script>
<![endif]--> 
//兼容ie8
<!--[if IE 8 ]>
 <script src="ie8.js<.script>
<![endif]--> 
//兼容ie9
<!--[if IE 9 ]>
 <script src="ie9.js<.script>
//兼容ie9以上或者非ie内核
<!--[if (gt IE 9)|!(IE)]><!-->
 <script src="ie9-up.js<.script>
<!--<![endif]-->

当然也可以通过js的媒体查询来做

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
var scan;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

//以下进行测试

if(Sys.ie)
{
    scan="您使用的ie内核"+Sys.ie+"浏览器";
}
if(Sys.firefox)
{    
    scan="您使用的是firefox内核"+Sys.firefox+"浏览器，如果有问题，建议您使用ie浏览器";
}
if(Sys.chrome)
{
    scan="您使用的是chrome内核"+Sys.chrome+"浏览器，如果有问题，建议您使用ie浏览器";
}
if(Sys.opera) 
{
    scan="您使用的是opera内核"+Sys.opera+"浏览器，如果有问题，建议您使用ie浏览器";
}
if(Sys.safari)
{
    scan="您使用的是safari内核"+Sys.safari+"浏览器，如果有问题，建议您使用ie浏览器";
}
alert(scan)

在判断里写针对ie版本的提示或者相应的代码就可以了，辣鸡ie！！

beyoungod

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
回顾一下兼容ie的方法（虽然ie已经被放弃了）

回顾一下兼容ie的方法（虽然ie已经被放弃了）11月起，微软将强制IE退休，部分URL网址将无法透过IE打开，但是也不确定会不会再遇到兼容ie的需求，想起为了兼容ie而做的各种各样的兼容，还是忍不住想吐槽html兼容方法相信各位偶尔无聊打开某些网站的代码，会看到这样的标签：//兼容ie7以下//兼容ie7<!--[if IE
复制链接

扫一扫