低版本ie模式 360兼容模式的兼容性调节以及控制代码

低版本ie模式 360兼容模式的兼容性调节以及控制代码,第1张

概述IE10/11兼容问题,不支持条件性注释后的3种替代方法: 方法一:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术 IE9是支持条件性注释的。 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> 在html网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像IE6/7/8那样编写

IE10/11兼容问题,不支持条件性注释后的3种替代方法:

方法一:使用IE=EmulateIE9属性指示浏览器采用IE9渲染技术

IE9是支持条件性注释的。

<Meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

在HTML网页的head里加入上面的元标记,这样IE10/11就能识别条件性注释了,我们也就可以像ie6/7/8那样编写针对性的CSS代码了。但这样做有个弊端,很显然,浏览器这样就会开启IE9的渲染模式,而不是最新的IE10/11技术。

方法二:使用媒体查询语句+-ms-high-contrast属性

CSS 的媒体查询语句(media query)是一种高级的CSS条件语句,它能根据一些属性和属性值计算判断CSS是否可以生效。在这里,我们要使用一个IE10/11独有的属性,它就 是-ms-high-contrast,只有IE10/11实现了这个属性,它可以有两个值active或none,使用下面的媒体查询语句:

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

 


火狐浏览器、谷歌浏览器不能识别这个属性,所以不会执行这个查询语句里的CSS,从而实现了条件性执行的效果。

方法三:使用JavaScript判断浏览器的类型

先用JavaScript判断是否是IE浏览器,如果是,就在页面的<HTML>标记上添加一个“IE”的类名:

var ms_IE = false;
var ua = window.navigator.userAgent;
var old_IE = ua.indexOf(‘MSIE ‘);
var new_IE = ua.indexOf(‘TrIDent/‘);
    
if ((old_IE > -1) || (new_IE > -1)) {
    ms_IE = true;
}
    
if ( ms_IE ) {
   document.documentElement.classname += " IE";
}

 

 还有一个就是IE11针对h5的表单验证部分,验证失败后input标签会出现一个红色的框,比较丑。这个时候你只要针对专门的input标签,增加一个input{outline:none};就可以将红色的边框去掉了。

 

解决IE11兼容性padding左右内边距往往比别的浏览器大了一倍。

* {      Box-sizing: content-Box;      -moz-Box-sizing: inherit;      -webkit-Box-sizing: inherit;}

总结

以上是内存溢出为你收集整理的低版本ie模式 360兼容模式的兼容性调节以及控制代码全部内容,希望文章能够帮你解决低版本ie模式 360兼容模式的兼容性调节以及控制代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1072026.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存