IE条件注释与CSS Hacks »
Written by
Rainbow
On 2010-03-02
With
我们知道，IE6的存在，因其预装于目前市场占有率最大的 Windows XP 操作系统。对于老态龙钟的IE6，说拜拜还需要很长的时间。
IE虽然给我们网页设计师，带来了不少多麻烦，还好，IE条件注释
，给我们解决浏览器兼容问题带来了一个很好的方法。
一、什么是IE条件注释？
IE条件注释，顾名思义就是使用IE特有的条件语句来显示代码块。
这些巧妙的逻辑片段只能被IE浏览器所支持，其它的浏览器理解为纯粹的HTML注释，不起任何作用。条件注释在IE5中首次出现，并且得到了
Widnows浏览器所有后续版本的支持。IE条件注释及其有效，而且非常容易记住。通过这些技巧，我们可以为基于Windows的IE5、6、7、8添
加一些特殊的行为。这样做的好处是，HTML和CSS代码可以通过验证。主要的缺点是这些注释需要放在HTML页面中，而不是放在CSS中。这样，当你不
需要这些东西，或者有所更改的时候，就需要维护很多的地方。好处是通过这种方式使用条件注释，可以很轻松的管理项目中的目标浏览器，并使得CSS补丁文件
保持独立自由。更重要的是它帮助我们优化了 CSS样式表，保证了主要样式表的干净，这对于大型网站来说就很重要了，也许你还没有感觉到它的可爱之处。
作为有Web标准意识的开发者，我们始终应该首先在大部分现有的兼容标准的浏览器上测试我们的设计，然后再为那些稍作细微修改就能回到正轨的浏览器提供补丁。
二、条件注释使用方法
条件注释属性
-
gt
: greater than，选择条件版本以上版本，不包含条件版本
-
lt
: less than，选择条件版本以下版本，不包含条件版本
-
gte
: greater than or equal，选择条件版本以上版本，包含条件版本
-
lte
: less than or equal，选择条件版本以下版本，包含条件版本
-
!
: 选择条件版本以外所有版本，无论高低
The Code
我们概括性地说明一下你如何使用条件注释，首先，我们应该把你所有的CSS
等CSS文件放在中。条件注释的基本结构和HTML的注释()是一样的。因此 ，IE以外的浏览器将会把它们看 作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。
Target ALL VERSIONS of IE（ 所有的IE可识别 ）
1
|
<!--[
if IE]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"all-ie-only.css"
/>
<![
endif]
-->
|
Target everything EXCEPT IE （除IE外都可识别 ）
1
|
<!--[
if !IE]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"not-ie.css"
/>
<![
endif]
-->
|
Target IE 7 ONLY （ 仅IE7可识别 ）
1
|
<!--[
if IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie7.css"
>
<![
endif]
-->
|
Target IE 6 ONLY（仅IE6可识别）
1
|
<!--[
if IE 6
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie6.css"
/>
<![
endif]
-->
|
Target IE 5 ONLY（仅IE5.0与IE5.5可以识别 ）
1
|
<!--[
if IE 5
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie5.css"
/>
<![
endif]
-->
|
Target IE 5.0 ONLY (只有IE5.0可以识别 )
Target IE 5.5 ONLY（只有IE5.0可以识别）
1
|
<!--[
if IE 5.5000
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie55.css"
/>
<![
endif]
-->
|
Target IE 6 and LOWER（IE6和IE6以下的）
1
|
<!--[
if lt IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie6-and-down.css"
/>
<![
endif]
-->
|
1
|
<!--[
if lte IE 6
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie6-and-down.css"
/>
<![
endif]
-->
|
Target IE 7 and LOWER（IE7和IE7以下的）
1
|
<!--[
if lt IE 8
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie7-and-down.css"
/>
<![
endif]
-->
|
1
|
<!--[
if lte IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie7-and-down.css"
/>
<![
endif]
-->
|
Target IE 8 and LOWER（IE8和IE8以下的）
1
|
<!--[
if lt IE 9
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie8-and-down.css"
/>
<![
endif]
-->
|
1
|
<!--[
if lte IE 8
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie8-and-down.css"
/>
<![
endif]
-->
|
Target IE 6 and HIGHER（IE6和IE6以上的）
1
|
<!--[
if gt IE 5.5
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie6-and-up.css"
/>
<![
endif]
-->
|
1
|
<!--[
if gte IE 6
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie6-and-up.css"
/>
<![
endif]
-->
|
Target IE 7 and HIGHER（IE7和IE7以上的）
1
|
<!--[
if gt IE 6
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie7-and-up.css"
/>
<![
endif]
-->
|
1
|
<!--[
if gte IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie7-and-up.css"
/>
<![
endif]
-->
|
Target IE 8 and HIGHER（IE8和IE8以上的）
1
|
<!--[
if gt IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie8-and-up.css"
/>
<![
endif]
-->
|
1
|
<!--[
if gte IE 8
]
>
<link rel=
"stylesheet"
type=
"text/css"
href=
"ie8-and-up.css"
/>
<![
endif]
-->
|
Universal IE 6 CSS（通用的IE 6样式）
处理IE
6和IE6以下的版本始终是一个超特殊的挑战。老态龙钟的IE6，还保持着高额的市场占有率，还不能彻底的放弃它，不然会有许多的客户抱怨我们。不过也有
些人正在放弃对它的支持，包括大企业，大型网络应用，甚至政府。有一个不失落的 ，不放弃的 解决办法，那就是使用一个特精简的样式 universal IE 6 CSS
.，然后为IE 7和以上（和所有其他浏览器）的应用常规的CSS。
1
2
3
|
<!--[
if !IE 6
]
>
<!-->
<link rel=
"stylesheet"
type=
"text/css"
media=
"screen, projection"
href=
"REGULAR-STYLESHEET.css"
/>
<!--<![
endif]
-->
<!--[
if gte IE 7
]
>
<link rel=
"stylesheet"
type=
"text/css"
media=
"screen, projection"
href=
"REGULAR-STYLESHEET.css"
/>
<![
endif]
-->
<!--[
if lte IE 6
]
>
<link rel=
"stylesheet"
type=
"text/css"
media=
"screen, projection"
href=
"http://universal-ie6-css.googlecode.com/files/ie6.0.3.css"
/>
<![
endif]
-->
|
IE6/IE7/FF的CSS Hacks
1.区别IE和非IE浏览器
1
2
3
4
|
#tip
{
background
:
blue
;
/*非IE 背景藍色*/
background
:
red
\9
;
/*IE6、IE7、IE8背景紅色*/
}
|
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
【示例】：
1
2
3
4
5
|
#ue
{
/*Firefox 背景变蓝色*/
background
:
red
\9
;
/*IE8 背景变红色*/
*
background
:
black
;
/*IE7 背景变黑色*/
_background:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏
览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google
Chrome、Safari等)。
3.区别IE6、IE7、Firefox (方法 1)
【区别符号】：「*」、「_」
【示例】：
1
2
3
4
5
|
#tip
{
background
:
blue
;
/*Firefox背景变蓝色*/
*
background
:
black
;
/*IE7 背景变黑色*/
_background:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox。
4.区别IE6、IE7、Firefox (方法 2)
【区别符号】：「*」、「!important」
【示例】：
1
2
3
4
5
|
#tip
{
background
:
blue
;
/*Firefox 背景变蓝色*/
*
background
:
green
!important;
/*IE7 背景变绿色*/
*
background
:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
【区别符号】：「*」、「!important」
【示例】：
1
2
3
4
|
#tip
{
background
:
blue
;
/*Firefox 背景变蓝色*/
*
background
:
green
!important;
/*IE7 背景变绿色*/
}
|
【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7 (方法 1)
【区别符号】：「*」、「_」
【示例】：
1
2
3
4
|
#tip
{
*
background
:
black
;
/*IE7 背景变黑色*/
_background:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7.区别IE6、IE7 (方法 2)
【区别符号】：「!important」
【示例】：
1
2
3
4
|
#tip
{
background
:
black
!important;
/*IE7 背景变黑色*/
background
:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。
8.区别IE6、Firefox
【区别符号】：「_」
【示例】：
1
2
3
4
|
#tip
{
background
:
black
;
/*Firefox 背景变黑色*/
_background:
orange;
/*IE6 背景变橘色*/
}
|
【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。
9. IE-6 ONLY
1
|
*
html #div
{
height
:
300px
;
}
|
10. NON IE-7 ONLY:
1
|
#div
{
_height:
300px
;
}
|
11. Hide from IE 6 and LOWER:
1
|
#div
{
height
/**/
:
300px
;
}
|
1
|
html >
body #div
{
height
:
300px
;
}
|
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
/* Opera */
html:first-child
#opera
{
display
:
block
;
}
/* IE 7 */
*
:first-child
+
html{
background-color
:
#F00
;
}
/* IE 7 */
html >
body #ie7
{
*
display
:
block
;
}
/* IE 6 */
*
html #div
{
background-color
:
#F00
;
}
/* IE 6 */
body #ie6
{
_display:
block
;
}
/*IE7及其更低版本*/
*
:first-child
+
html{
}
*
html{
}
/*IE7,IE7以上和主流浏览器*/
html>
body{
}
/*适合主流浏览器(IE7排除在外，IE7以下的也不行)*/
html>
/**/
body{
}
/* Firefox 1 - 2 */
body:empty
#firefox12
{
display
:
block
;
}
/* Firefox */
@-moz-document url-prefix() { #firefox { display: block; } }
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } }
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } }
|
IE6
IE7
IE8
IE9
Firefox
Chrome
Safari
Opera
| !important |
|
Y |
Y |
Y |
Y |
Y |
Y |
Y |
| _ |
Y |
|
|
|
|
|
|
|
| * |
Y |
Y |
|
|
|
|
|
|
| *+ |
|
Y |
|
|
|
|
|
|
| \9 |
Y |
Y |
Y |
Y |
|
|
|
|
| \0 |
|
|
Y |
Y |
|
|
|
|
ps：
IE6不支持!important，是指不支持important的优先级，并不影响css属性值的解析。比如“color:green!important;color:red;”，除了在IE6下字体颜色解析为红色，其他（你懂的）浏览器下都是绿色。
分享到：
相关推荐
all css hacks 列表 支持目前主流游览器
CSS hacks利用浏览器的漏洞来隐藏特定浏览器的CSS规则
我不再使用CSS Hacks了，相反的是，我将使用IE的条件判断将类应用到body标签。 但是，我想记录我之前碰到过的每一个浏览器特定的CSS 选择器和样式属性。我相信也没有其他方式提供样式表给独特的Safari. 利用这些...
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack：该脚本里面的IE排除条件注释，以确保IE6-9不承认它，然后它功能检测到了名为@ cc_on。 复制代码代码如下: <!–[if !IE]...
下面是各个 IE 版本的 CSS Hacks 写法. 掌握 CSS Hacks 可以说是前端开发工程师的一个基本技能。随着浏览器版本的遍地开花，我们寻找着尽可能使各种浏览器表现一致的 CSS 写法。当然 CSS Hacks 是最为流行的解决...
熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。 IE hacks 举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写...
英文pdf版 计算机电子书下载,CSS标准并不提供一个方法去指定一个特定的浏览器版本，所以网络开发者社区开发了CSS filter（也被称作”CSS hacks”）。这些filter利用浏览器的问题或者未执行的特性来隐藏针对特殊...
复制代码代码如下: .test{ color:/*\**/#00f\9; /* IE8 */ } .test, .test:-moz-any-link{...可同时区分IE8、IE7、IE6、Firefox的CSS hacks： CSS代码 复制代码代码如下: .test{ color:#000; /* Firefox */ color:/*\
CSS 浏览器兼容性教程，需要的下载吧。
bs-css-hacks, Bootstrap 工作的CSS bugs/quirks/incompatibilities的索引 bugs/quirks/incompatibilities的索引，的索引，它的工作范围为 ，如 v3.2.0.目标：确保在至少 1个 MDN的资源中提到了上述每个。因为普通...
50 Android Hacks.pdf
browser-hack-sass-mixins：浏览器hack sass mixin-将SCSS应用于特定的浏览器-CSS hacks：IE，Chrome，Firefox，Edge，Opera
IE Hack 各种浏览器兼容性调整办法 IE6 IE7 IE8 IE9
The CSS Anthology: 101 Essential Tips, Tricks & Hacks is a compilation of best practice solutions to the most challenging CSS problems. The third edition of this best-selling book, published in full ...
BSD hacks techniques
1. Getting Started with CSS ......................................................................... 1 2. Text Styling and Other Basics ..................................................................