如果你的浏览器是IE11,页面中头部

<meta http-equiv="X-UA-Compatible" content="IE=edge">

那么用这个判断是无效的。

<!--[if IE]><style type="text/css">body{ background: red;}</style><![endif]-->

如果你是IE11的话,如何让这个判断有效果?手动F12仿真--》文档模式 切换到IE9,这个操作证明,IE条件判断,在低版本中是有效果的。

后来查到微软官方 https://msdn.microsoft.com/en-us/library/hh801214(v=vs.85).aspx

官方声明说了2个方面:

一,IE10以及以上版本,不在支持这种条件注视,

二,解决办法如下:

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

在页面中,meta 渲染模型改为IE9。

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

IE9是支持条件性注释的。

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

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"><title>运行环境IE11</title></head><body><!--[if IE]><style type="text/css">body{ background: orange;}</style><![endif]--></body>
</html>

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

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

@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;alert("IE浏览器")
}if ( ms_ie ) {document.documentElement.className += " ie";
}

有了这个标志性css class后,我们就可以在CSS里区别性的编写css代码了。

.testClass{/*这里写通用的css*/
}.ie .testClass{/*这里写专门针对IE的css*/
}

这三种方法都能实现在IE10/11里条件性注释的替代效果,各有各的使用场景,我们根据软件的运行环境来选择使用哪一种。

仅IE6和IE7识别@media screen\9 {   .selector {  property: value; } }
仅IE6和IE7、IE8识别@media \0screen\,screen\9 {   .selector {  property: value; } }
仅IE8识别@media \0screen {   .selector {  property: value; } }
仅IE8-10识别@media screen\0 {   .selector {  property: value; } }
仅IE9和IE10识别@media screen and (min-width:0\0) {   .selector {  property: value; } }
仅IE10/11识别@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {    /* IE10-specific styles go here */ } 

以上部分内容来之IE10/11不支持条件性注释后的替代方法 http://www.webhek.com/conditional-comments-in-ie11-10

[if IE] 在IE10 或者是 IE11以及以上 中无效的解决方案相关推荐

  1. html引入vue不兼容ie11,Vue在IE11版本浏览器中的兼容性问题

    一:Vue 2.x cli1. 使用vue2.0的项目在IE11版本浏览器中是空白的  或者路由跳转但是而页面显示依旧是上一个路径的页面元素  这是因为ie11不支持es6  而我们之前有使用的bab ...

  2. liferay6.2.2GA2中CKEditor在IE11与SAFARI中BUG解决方案

    liferay version: 6.2.2_GA2 ckeditor_within_liferay version:4.0.3 ckeditor_latest_version:4.4.7 因为最近用 ...

  3. Windows7安装IE11步骤和中文安装包超简单

    此安装包仅限Win7 SP1(Service Pack1)其他本版装不上. 亲测:安装VS2015 提示安装IE10,安装此浏览器可以解决. 链接:https://pan.baidu.com/s/1O ...

  4. html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决

    筹备工作 //借助插件 npm install babel-plugin-import --save-dev // .babelrc { "plugins": [["im ...

  5. html 兼容ie11,前端开发中在IE11下出现的一些兼容性问题(持续汇总)

    1.Chrome上能够正常打开网页,可是在IE11上打开一片空白,打开控制台报语法错误,以下图: 点击chunk-vendors.js后发现是vue-baidu-map组件报错,以下图: 缘由: vu ...

  6. ie11上vue中使用elementui的input框无法输入中文

    2019独角兽企业重金招聘Python工程师标准>>> vue2.0+elementui(elementui组件库--input)项目中,使用了如下elementui组件(input ...

  7. 问题及解答---表格(2020.7.20--至今)

    标题 地址 添加日期 添加原因 序号 [if IE]失效 [if IE] 在IE10 或者是 IE11以及以上 中无效的解决方案_itwangyang520的博客-CSDN博客 2020.7.20 做 ...

  8. Java代码制作ie浏览器_[Java教程]判断IE浏览器代码实例

    [Java教程]判断IE浏览器代码实例 0 2015-08-12 01:00:19 判断IE浏览器代码实例: 由于当下浏览器类型众多,并且对同一段代码的解读有时候各有不同,所以要根据浏览器的类型来执行 ...

  9. 判断浏览器版本是否ie8,ie9,ie10,ie11并提示升级

    判断是否IE浏览器极其版本主要是三种方法,第一种是通过 if IE 条件注释语句,第二种是通过 @cc_on 条件编译结合 document.documentMode 属性来判断,第三种则是简单粗暴地 ...

最新文章

  1. Acwing第 30 场周赛【完结】
  2. 解秘 Node.js 单线程实现高并发请求原理,以及串联同步执行并发请求的方案
  3. ajax正则验证p标签显示,JQuery+Ajax实现唯一性验证、正则
  4. 关于gevent的协程间通信及队列和事件event用法
  5. 英文拼写及语法检查软件
  6. [恢]hdu 2000
  7. Jepack4.5.1上手动安装cuda10.0 cudnn 7, Jepack4.5.1 TX2 i安装pytorch1.6.0
  8. redis安装教程(简明扼要,一看就懂)
  9. matlab 动态面板数据分析,MATLAB空间面板数据模型操作简介 空间面板数据模型
  10. Ehcache开源解读
  11. 在word文档中插入代码_如何在自动更新的Word文档中插入当前的月份和年份
  12. 黔程似锦——2021国庆游攻略
  13. 越南edu学生校园校友邮箱申请UNIDAYS学生认证登录Apple music原创教程
  14. [Unity][Crowd]学习人群模拟资源分享以及相关的问题
  15. 世事洞明皆学问-拉链拉头的拆分安装
  16. oracle导出辅助账明细,AO2011导入国库集中支付系统3.0的辅助账
  17. MySQL-SQL语句的优化
  18. 4399 面试笔试题
  19. 第二次作业-产品分析
  20. c++ DFS练习 红与黑

热门文章

  1. 合同约定的结算条款与招投标文件不一致的处理方法
  2. 基于树莓派聊天机器人设计
  3. Linux用户与权限管理命令
  4. 如何在Mac上查看系统日志
  5. QML QtLocation地图应用学习-1:在Map中展示图元 Item
  6. VueJS 官方路由之 Vue Router
  7. 第五章第五十题(对大写字母计数)(count the uppercase letters)
  8. 文件上传 .htaccess 与.user.ini
  9. 计算机组成英语单词,“计算机组成原理”课专业词汇汉英对照.pdf
  10. 2021年N1叉车司机考试试卷及N1叉车司机考试总结