IE条件注释仅在IE5.5–IE9的HTML中有效,必须硬编码于<head>或<body>内,支持< link >、< script >等标签,用于加载独立兼容CSS文件,如ie8-and-down.css。

IE条件注释只在IE9及以下生效,且仅HTML中可用
条件注释是IE独有的HTML语法,<!--[if IE]>这类写法从IE10开始被彻底移除,现代Edge和Chrome完全无视。它不能写在CSS文件里,也不能用JavaScript动态生成——必须硬编码在HTML的<head>或<body>中,且只对IE5.5–IE9有效。
常见错误是把条件注释塞进<style>块或当成CSS规则写,结果白忙活;还有人试图用document.write注入,但IE8+在DOMContentLoaded后已不支持条件注释解析。
- 只支持
<link>、<script>、普通HTML标签嵌套 - IE10+、所有非IE浏览器会把整个条件注释块当普通注释忽略
- 注意
lt(less than)、gte(greater than or equal)等关键字大小写不敏感,但空格和括号必须严格匹配
引入独立CSS文件是最稳妥的兼容方案
比起在主CSS里堆*zoom:1或_float:left这些hack,用条件注释加载单独的ie-fix.css更干净、可维护性更高。浏览器只下载它该加载的那份,避免污染现代CSS逻辑。
典型写法:
立即学习“前端免费学习笔记(深入)”;
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/ie8-and-down.css"> <![endif]-->
这里lt IE 9覆盖IE6/7/8,而IE9本身支持大部分CSS2.1,通常只需少量修补,可另配ie9.css并用[if IE 9]单独引入。
- 路径必须是相对或绝对URL,不能是
./ie.css这种Node.js式写法(IE6不认点斜杠) - 不要加
media="all"——IE条件注释本身已做环境过滤,加了反而可能触发某些旧版IE的解析bug - 多个条件注释按顺序加载,IE会阻塞渲染直到这些CSS下载并解析完
IE8及以下不支持CSS3选择器和属性,得降级处理
ie8-and-down.css里不能出现nav > ul li:first-child或background: linear-gradient(),IE8连:nth-child()都不认识,伪元素::before也只认单冒号:before。
常用降级手段:
- 用
.clearfix类替代display: flex布局,配合zoom: 1触发hasLayout - 图片替换文字用
background-image+text-indent: -9999px,别信clip或visibility:hidden - 圆角、阴影全砍掉,或用PNG背景图模拟(注意Alpha通道在IE6需额外滤镜)
-
opacity得用filter: alpha(opacity=50),且必须配合zoom: 1才能生效
条件注释无法解决JS依赖的CSS问题
如果页面靠Modernizr或自定义JS检测CSS支持再加载样式,条件注释就完全失效——因为JS执行时条件注释早已被IE解析完毕并丢弃。比如你用JS判断document.body.style.borderRadius === '',然后动态appendChild一个<link>,这个link不会被IE当作“条件注释引入”,也就不会触发IE特有的渲染逻辑。
更麻烦的是,有些CSS框架(如早期Bootstrap 2)依赖JS补丁激活某些样式,而这些JS在IE8下可能根本跑不起来,导致样式表加载了也白搭。
- 纯静态条件注释 + 静态CSS文件是最可靠的组合
- 任何涉及DOM操作、异步加载、运行时判断的方案,在IE8及以下都容易掉链子
- 真要动态控制,优先用
class切换(如<html class="ie8">),再用CSS前缀规则兜底
@font-face的限制——它只认EOT格式,且必须放在CSS文件顶部,不能被@import或媒体查询包裹。这点和条件注释无关,但往往卡在最后一步。










