IE浏览器各版本的CSS条件判断

2009-06-13 13:02 宝宝合凤凰阅读(1432) 评论(0) 编辑收藏举报

介绍

毫无疑问，任何一个试图使用 CSS 的网页设计师和开发人员都会发现不同的浏览器要求
不同的样式声明。这些烦恼归咎于各浏览器及其各版本不同程度的 CSS 执行的完整性。
条件 CSS 是这个问题的一个解决方案，采用的是 Internet Explorer 的条件注释语法的思想，
并把它内联到 CSS 声明之中。

基本用法

条件 CSS 主要用于指出一个特别的 CSS 声明是不是应该用于一个特别的浏览器。当然你不希望经常这么做，但是当你需要针对一个浏览器的时候，它会非常有用。可以在U4EA支持列表里看到，大部分的浏览器都支持这种方式。

任意 CSS 声明或者块都可以添加条件声明前缀，这些前缀有3种基本类型：
[if {!} browser]
[if {!} browser version]
[if {!} condition browser version]

! – 声明的否定 (例 NOT) – 可选

browser – 声明针对的浏览器
‘IE’ – Internet Explorer
‘Gecko’ – Gecko 核心的浏览器 (Firefox, Camino 等)
‘Webkit’ – Webkit 核心的浏览器 (Safari, Shiira 等)
‘SafMob’ – 移动版 Safari (iPhone / iPod Touch)
‘Opera’ – Opera 的浏览器
‘IEMac’ – Mac 版本的 Internet Explorer
‘Konq’ – Konqueror
‘IEmob’ – 移动版 IE
‘PSP’ – Playstation Portable
‘NetF’ – Net Front(恕糖伴西红柿无知，不知道这是啥东东)

version – 要针对的浏览器版本

condition – 算术符
lt – 小于
lte – 小于等于
eq – 等于
gte – 大于等于
gt – 大于

一些条件声明的例子：

// 条件-CSS 语法实例   
[if IE] - 如果浏览器是 IE   
[if ! Opera] - 如果浏览器不是 Opera   
[if IE 5] - 如果浏览器是 IE 5   
[if lte IE 6] - 如果浏览器是 IE 6 或者更低版本 (IE 5, IE 4 等)   
[if ! gt IE 6] - 和上面的声明等效, 如果浏览器版本不高于 IE 6

因为许多实例认为 div 是具有 width 和 padding 的盒类。因此它也应该在 IE 5 中表现正常(我发现很多人已经放弃支持 IE 5了，但这是一个经典例子)。IE 5的盒模型不标准，因此这就是使用条件 CSS 解决的方法：

// 条件 CSS 盒模型例子   
div.box {   
    width: 400px;   
    [if IE 5] width: 600px;   
    padding: 0 100px;   
}

像你所看到的，条件 CSS 使得你可以只维护一个 CSS 文件，而不是好几个需要用到 IE 的条件注释的文件。这有助于流线型维护，也使得代码更加清晰。

再进一步，条件 CSS 的一个重要特性是当它发现一条 @import CSS 声明时，它会自动打开并插入需要导入的文件。这样就减少了页面的加载时间，因为浏览器只需要对 CSS 文件做出一条 HTTP 请求。

尽管条件 CSS 大多用于针对不同版本的 IE 浏览器，当你在别的浏览器碰到很难修正的 bug(主要使用 Javascript 修正) 的时候，条件 CSS 也是相当有用的。例子包括了缺少 ‘display: inline-block’ 支持的 Firefox 2 和 Safari 2 中的背景图片 bug。这些 bug 在这些浏览器的最新版本里面已经修正了，但是当这些浏览器占有一定市场份额的时候，向后兼容就很重要了。

这里有完整的例子：

在浏览器中查看 Demo
查看原始 CSS
查看解析后的 CSS

下面的图片展示了此页面在 IE7，Safari 3，Firefox 2 和 Opera 9 中的显示效果。

注意这个例子不适合部署在实际生产环境中，因为你只想在各浏览器总保持一致的布局，而条件 CSS 只是用来修正 CSS 显示 bug。但是这个例子确实给出了一个好的例子用来说明不同的 CSS 怎样定位不同的浏览器。

更多的信息，定位浏览器群组和更复杂的条件表达式的详细讨论在高级页面(~~即将由前端观察推出中文译文，敬请期待~~已出，见)。

糖伴西红柿说：
Conditional-CSS，翻译成条件 CSS，还值得商榷，至少我们几个总觉得有点别扭，希望能有更好的翻译。
抛开这些，这个概念，我在读《CSS Mastery》的时候就接触到了。当时算是针对浏览器 hack 的一种，书中也没用过多篇幅介绍，我也没有太多注意。偶然发现，这个概念还是很有用处的嘛。
这个故事告诉我们，温故而知新。可惜我的《CSS Mastery》被我提前拿回祖国了，呃。。。

2009.03.13 更新
糖伴西红柿不好意思的向那些不明真相的一小撮群众承认错误。《CSS Mastery》讲的那个 hack 方法其实是 IE 的条件注释。而这个条件CSS（Conditional-CSS）就是以 IE 的条件注释为基础而开发出来的。使用的时候不能像 IE 条件注释一样，直接写在 CSS 语句里面，它还需要服务器端的脚本支持。具体内容前端会对Conditional-CSS官方的 demo 进行剖析，敬请再期待。

再一次承认错误，下次决不会这么急躁，这么不严谨了。 -________||。。。

原文地址：http://www.conditional-css.com/usage
译文地址：http://www.qianduan.net/?p=6162

============================================

Code

===========================================

条件CSS的高级用法介绍

条件CSS(Conditional-CSS)的开发源于在多数浏览器上修正 CSS 渲染 bug 的需求，以确保尽量多的用户看到正确的网站设计。核心思想建立在 Internet Explorer 上发现的条件注释方法，并扩展到包含其他的浏览器，而且将条件声明内联到 CSS 定义里面。

条件CSS(Conditional-CSS)并不仅仅对用户使用的浏览器感兴趣，而是对用户浏览器使用的渲染引擎更感兴趣。这就是条件(Conditional-CSS)使用 ‘Geckko’ 而非广为所知的 Firefox 作为它浏览器条件之一的原因。同样地， ‘Webkit’ 代替了 Safari。这使得其他使用同样渲染引擎地浏览器接受到那些同样地定位 CSS。这个规则地一个例外是使用了 IE(而不是 ‘Trident’)，因为这是使用的 IE 的条件注释，而 ‘Trident’ 并不怎么为人所知。同样地，对于 Opera，因为只有 Opera 使用 Presto 渲染引擎，所以使用了 ‘Opera’。

需要注意的是，如果所有浏览器都能正确地执行 W3C 发布的 CSS 标准，那么条件CSS(Conditional-CSS)就没有需求了。但是，CSS bug 对于开发者是无法回避的现实，而且往往都及其让人沮丧。条件CSS(Conditional-CSS)给我们提供了一个简单的方法来解决这些问题。

高级条件声明

条件块

一个典型的条件声明只应用于一条 CSS 规则。当然，也有可能对整个 CSS 块使用条件，这样的块只用于特定的浏览器。下面的例子中 CSS 块只用于 IE 浏览器。

// 条件块实例  
 
[if IE] .box {   
    width: 500px;   
    padding: 100px 0;   
}

一个更高级的使用了条件CSS(Conditional-CSS)的实例样式表可以看这里。它展示了使用条件声明的各种方法。需要注意的是在条件声明和 CSS 声明之间不需要空格。

条件导入

条件CSS(Conditional-CSS)不仅仅自动将 CSS 中找到的任意 ‘@import’ 声明进行扩展并引入(为了减少 HTTP 请求)，也允许条件导入语句。这可以用于为特定浏览器引入一些规则。下面的例子会为移动版 Safari(iPhone / iPod Touch)导入一个样式表，为其他浏览器导入另一个不同的样式表。

// 条件导入实例
 
[if SafMob] @import('iphone.css');   
[if ! SafMob] @import('non-iphone.css');

浏览器分组

将浏览器按照若干支持级别进行分组是一种常见并且是很好的做法。一个由我们在U4EA中提供的浏览器列表展示了这中方法，在那里我们将浏览器分成4个不同的支持级别:

A 级: 最高级，支持所有组件
C 级: 核心支持，基本显示信息
X 级: CSS 在该类浏览器中被锁定，仅依赖HTML渲染
U 级: 不支持。获得的CSS将和C级浏览器一样

可能遇到的情况是，你只想让A级浏览器获取某些CSS，而又要确保C级以及更低级的浏览器不能看到它们。比如，想让A级浏览器将一个UL列表显示为tab，而其他浏览器按照原始格式显示点式列表。

条件CSS 允许你通过定义一组浏览器到特定的分组来实现此类需求，然后使用标准条件语句中的浏览器区域来匹配这个浏览器分组。条件CSS 有一套内置的标准浏览器分组(当然，你也可以定义你自己的分组):

‘cssA’ – A 级CSS支持
- IE 6+
- Gecko 1.0+ (Firefox, Camino, Flock, etc)
- Webkit 312+ (Safari 1.3+, Google Chrome)
- Opera 7+
- Konqueror 3.3+
‘cssX’ – X 级CSS支持
- IE 4 以下
- IE Mac 4.5 以下

一个使用条件CSS的浏览器分组的例子:

// 条件CSS浏览器分组实例
[if cssA] ul.li {
	display: block;
	margin-left: 5px;
	width: 50px;
	/* etc */
}

正如你可以看到的，浏览器分组的条件语句被格式化为与标准条件语句同样的语法。注意’cssX’是一个特殊的浏览器分组，它可以引起条件CSS返回空值除了它自己默认的。

[if {!} browser_group]

在这里:

! – 代表否定声明(i.e. NOT) – 可选择的
browser_group – 指定浏览器分组声明标签
- ‘cssA’ – A 级浏览器

浏览器是如何被检测到的

默认浏览器通过条件CSS和相应的样式被检测到，然后通过读取浏览器的user agent字符串处理。这使得设置和整合条件CSS到你的网站变得灰常容易，你所需要做的仅仅是上传代码并在你的HTML中编辑CSS import声明就可以了。User agent 检测是一种检测那种浏览器及其版本被使用的有效的方法，不过有一种倒退的现象就是有些用户改变他们的浏览器的user agent 以显示他们很了不起（通常是IE）。在这种情况下，最终用户将会获取错误的CSS到他们的浏览器。我对此的观点是，如果你的目标浏览器是IE，那么你应该预料到IE将会看到的情况。

通过HTTP GET 变量设置浏览器

之前我们有说过确保IE并且只有IE可以获得IE特定的CSS是可行的。要做到这些我们需要使用IE的条件注释并结合条件CSS能够使用GET变量获取浏览器信息的能力。条件CSS 接受浏览器的两个不同变量：

b – 浏览器名称
v – 浏览器版本(可选)

下面的这个例子显示使用条件注释声明的HTML需要确定IE6和IE7将获取它们的特定颜色，而其它的所有浏览器将获取其它样式:

<!--[if !IE]><!-->
  <style type="text/css">@import '/media/css/c-css.php?b=nonIE';</style>
<!--<![endif]-->
<!--[if IE 6]>
  <style type="text/css">@import '/media/css/ic-css.php?b=IE&v=6';</style>
<![endif]-->
<!--[if gte IE 7]>
  <style type="text/css">@import '/media/css/c-css.php?b=IE&v=7';</style>
<![endif]-->

使用静态CSS文件

使用条件CSS为每一个浏览器生成一个定制的CSS文件的方法看起来很不错，它只是十分适用于管理一个相对比较轻量级的网站，因为程序必须运行于样式的每一个请求。对于中到大型网站，这的确不太合适，特别是当创建的文件数量受到限制的时候。所以条件语句有接受命令行参数的能力，它可以指定某个浏览器和版本(可选)应该生效然后输出最终样式到标准输出文件。下面的脚本可以用于为IE6/7以及非IE浏览器生成CSS文件(注意，该脚本描述了PHP版本的条件CSS，但是命令行选项和C版本一样)：

#!/bin/sh
php -q c-css.php IE 7 > ie7.css
php -q c-css.php IE 6 > ie6.css
php -q c-css.php > nonie.css

公平的说，这是你需要的最合适的样式组合。因此，下面的使用HTML注释可以配合上面的脚本来调用需求的CSS文件。

<!--[if !IE]><!-->
  <style type="text/css">@import '/media/css/nonie.css';</style>
<!--<![endif]-->
<!--[if IE 6]>
  <style type="text/css">@import '/media/css/ie6.css';</style>
<![endif]-->
<!--[if gte IE 7]>
  <style type="text/css">@import '/media/css/ie7.css';</style>
<![endif]-->

享受条件CSS的好处吧！

糖伴西红柿说：
最终的条件CSS(Conditional-CSS)的高级用法也新鲜出炉了，加上老江的条件CSS(Conditional-CSS)介绍，这个系列就全了。
剩下的就是学习、讨论了。嗯，这篇文章非我一人之功，神飞同学做出了巨大的贡献。

=====================================

或许你知道，Internet Explorer 6 已经不是最先进的浏览器了。事实上，它已经八岁了，但是很多人还在使用这个不安全的浏览器。正因为如此，网页设计师不得不额外担心他们的网站在IE6下的表现。
在CSS 框架和模板出现以后，一些布局的问题可以很容易解决掉，但是显然这不能解决全部问题。这些问题通常可以通过普通的CSS来解决，但是有时候只针对IE显示一些(样式)信息可能会更好。
这是用条件注释是可以实现的。条件注释只支持Windows系统中的IE浏览器。通过这些技巧，我们可以为基于Windows的IE5、6、7、8添加一些特殊的行为。这样做的好处是，HTML和CSS代码可以通过验证。
条件注释的格式
所有可用的条件注释标签是基于相同的原理的。这些条件注释可用于所有的IE浏览器版本。

根据情况不同，你需要添加一个浏览器版本号。比如，或许你想让IE5.5使用一个不同的样式表：

或者只针对IE7:

你已经掌握了要领了，是吧？
我们还能用条件注释做什么？
微软同样为这些条件注释添加了一些参数。比如，我们可以使用高于或等于某个版本、低于或等于某个版本。添加这些的确很方便。
比如说，我们要给IE7以及以下的浏览器添加一个不同的样式表，我们可以这样做：

或者我们想为IE6以上的浏览器创建一个不同的样式表：

我们可以在我们的条件注释中使用以下参数：

lte - 低于或等于
lt - 低于
gte - 高于或等于
gt - 高于
(IE6)|(IE7) - Internet Explorer 6或 Internet Explorer 7
(IE6)&(IE7) - Internet Explorer 6 和 Internet Explorer 7

点击这里查看更多参数
使用条件注释让用户升级他们的过时的浏览器
我通常不使用条件注释来修正浏览器bug。我使用他们的方法是告诉人们，他们使用的是一个过时的浏览器。在此类信息里面，我告诉他们，为了安全和更多功能，他们应该升级他们的浏览器。

通过这种方法，在用户看到这条消息的时候，你可以告诉用户，他们不应该使用这个版本的浏览器，然后他们就可能升级到一个更先进的浏览器。
正如你看到的这样，你可以在你的网站中使用这些条件注释的好处。
前几天前端观察发表了一系列的条件CSS 的用法，那些用法是基于这个条件注释的扩展用法。当然这种条件注释的用法比较简单方便，但是使用条件css 可以实现更高级的功能。请注意，本文所讲的条件注释可以直接在HTML代码中使用，而条件CSS需要配合程序实现。——神飞

=======================

==================================================

条件注释只能在windows Internet Explorer(以下简称IE)下使用，因此我们可以通过条件注释来为IE添加特别的指令。

通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的，比如：

1，条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2，IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3，条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

可使用如下代码检测当前IE浏览器的版本（注意：在非IE浏览器中是看不到效果的）

<![endif]-->

那如果当前的浏览器是IE，但版本比IE5还低，该怎么办呢，可以使用<!--[if ls IE 5]>，当然，根据条件注释只能在IE5+的环境之下，所以<!--[if ls IE 5]>根本不会被执行。

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同

Conditional comments属于CSS hack? 条件判断属于CSS hack吗？

严格地说是属于CSS hack。因为就好象其他真正的css hack一样，它使得我们可以给一些浏览器赋予特殊的样式，再则它不依赖于某个浏览器的BUG来控制另外一个浏览器（的样式）。除此之外，条件判断还能用来做一些超出CSS HACK范围的事情(虽然这种情况很少发生)。

因为条件判断不依赖于某个浏览器的hack,而是一个经过深思熟虑的特色功能，所以我相信它是可以被放心地使用的。当然，其他浏览器也有可能支持条件判断（到目前为止还没有），但是看起来，他们应该不会使用如<!--[if IE]>这样的语法。

应该如何应用条件注释

本文一开始就说明了，因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，我们为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的。比如：

<link rel="stylesheet" type="text/css" href="css.css" />

<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

这其中就区分了IE7和IE6向下的浏览器对CSS的执行，达到兼容的目的。同时，首行默认的css.css还能与其他非IE浏览器实现兼容。

注意：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。

比如如下代码，在IE浏览器下执行显示为红色，而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行，则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。

同时，有人会试图使用<!--[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

正常就是默认的样式，对IE浏览器需要特殊处理的，才进行条件注释。

刷新页面返回顶部

1囍🐷🐴🐰☀️宝宝合凤凰☀️🐴🐷🐰囍1 1囍🐷🐴🐰☀️宝宝合凤凰☀️🐴🐷🐰囍1