条件注释后，IE10 / 11不支持替代方法

专门针对IE的条件注释是一件很奇怪的事情，它是专门为IE浏览器准备的，因为其他浏览器无法识别此标记. 之所以需要这种方法ie10 浏览器css兼容问题，是因为IE实现的网页渲染效果不同于其他浏览器. 使用条件注释可以对浏览器的CSS和其他代码进行不同的处理.

<!--[if IE]>
<link href="ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE6]>
<style type="text/css">
/* styles for IE6 goes here */
</style>
<![endif]-->
<!--[if lt IE7]>
<style type="text/css">
/* styles for IE7 goes here */
</style>
<![endif]-->
<!--[if lte IE8]>
<style type="text/css">
/* styles for IE8 goes here */
</style>
<![endif]-->
<!--[if gt IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if gte IE9]>
<style type="text/css">
/* styles for IE9 goes here */
</style>
<![endif]-->
<!--[if !IE]> -->
<style type="text/css">
/* styles goes here but should not appear in IE5-9 */
</style>
<!-- <![endif]-->

但是当IE版本达到10/11时，它不支持这种条件注释（有关MSDN的说明）.

可以说，自IE9以来，IE已被WEB开发人员接受. 许将IE9，Firefox和Google Chrome之后的浏览器统称为现代浏览器，因为他们开始实现新的统一HTML5和CSS3标准. 但是愿望是美丽的，但现实是残酷的. 许多Web开发人员在开发实践中发现，在IE9 / 10/11上显示的同一CSS的效果不同于其他浏览器提供的效果. 换句话说，我们仍然需要条件注释.

那么，如何在不支持条件注释的IE10 / 11上实现条件注释的效果？

IE9支持条件注释.

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

将上述meta标签添加到HTML页面的开头，以便IE10 / 11可以识别条件注释，并且我们可以编写目标CSS代码，例如IE6 / 7/8. 但是这样做有一个缺点. 显然，浏览器将只能渲染IE9模式，而不是最新的IE10 / 11技术.

CSS媒体查询语句（媒体查询）是高级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 */
}

Firefox和Google Chrome无法识别此属性，因此将不执行此查询中的CSS，从而达到条件执行的效果.

首先使用JavaSCript确定它是否为IE浏览器，如果是，则在页面的标记上添加一个“ 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";
}

有了这个标志性的CSS类ie10 浏览器css兼容问题，我们可以用不同的方式编写CSS代码.

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

这三种方法可以达到IE10 / 11中条件注释的替换效果. 每个都有自己的使用场景. 我们根据软件的运行环境选择使用哪个.

欢迎发表评论.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-263792-1.html