`
shishi11
  • 浏览: 116401 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE条件注释与CSS Hacks(备记)

 
阅读更多

IE条件注释与CSS Hacks »

Written by Rainbow On 2010-03-02 With 2 Comments

我们知道，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下字体颜色解析为红色，其他（你懂的）浏览器下都是绿色。

分享到：
| interface 与 abstract interface
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css hacks 利用浏览器的漏洞来隐藏特定浏览器的CSS规则

    CSS Hacks主要分为两大类：条件样式表和CSS Hacks本身。 #### 二、条件样式表 条件样式表是通过HTML中的`&lt;link&gt;`标签结合条件注释的方式为特定版本的Internet Explorer加载独立的样式表。例如： ```html ...

    CSS.Hacks.and.Filter

    ### CSS Hacks与Filter详解 #### 一、CSS Hacks简介 在Web开发领域，不同浏览器对于CSS的支持程度和解析方式存在差异。由于CSS标准本身并没有提供一种直接的方法来指定某个特定版本的浏览器，这就导致了跨浏览器...

    CSS Conditionals & Hacks Cheat Sheet

    首先，CSS条件注释（Conditionals）主要应用于早期的Internet Explorer浏览器，尤其是IE6和IE7。这些条件注释是基于JavaScript的，但它们在HTML中直接写入，允许开发者针对特定版本的IE应用特定的样式。例如： ```...

    网页制作需要了解的IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

    `#00f\9`是一个针对IE的条件注释，它在IE8以及更早的IE版本中能被正确解析，但在其他浏览器中则会被忽略。 对于IE7和IE6，我们可以使用更具体的CSS hacks来区分： ```css .test, .test:-moz-any-link { color: #...

    John.Wiley.and.Sons.CSS.Hacks.and.Filters.Making.Cascading.Stylesheets.Work.May.2005.eBook-LinG

    《CSS Hacks与Filters：使层叠样式表工作》是由John Wiley & Sons出版的一本关于CSS高级技巧的专业书籍，发布于2005年5月。这本书深入探讨了如何克服CSS在不同浏览器间的兼容性问题，确保网页设计的跨平台一致性。 ...

    CSS 忍者.doc

    本文将深入探讨几种关键的CSS Hacks技术，包括条件注释、选择器Hack以及通过条件判断插入特定类的方法，旨在帮助读者理解并掌握这些技巧，以便在实际项目中更加高效地解决浏览器兼容性挑战。 #### 条件注释：针对IE...

    IE浏览器单独写CSS样式的几种方法

    熟悉的方法有 IE hacks 和条件注释 CSS（Conditional Stylesheets），下面，不妨讨论一下这两种方法的优缺点。 IE hacks 举个例子，一个元素在其他浏览中的左边距是 30px ，而在 IE6 中则设置为 20px ，可以如下编写...

    CSS在IE6下不起作用，没有效果

    1. 使用条件注释：可以为IE6单独引入一个CSS文件，专门处理其兼容性问题。 2. IE-specific hacks：如在样式前添加`*`或`_`符号，只让IE6识别这些规则。 3. 使用CSS Reset：如Eric Meyer Reset或 Normalize.css 可以...

    浏览器特定的CSS Hacks汇总

    因此，现代的前端开发趋势是避免使用CSS Hacks，转而依赖条件注释（如`&lt;!--[if IE]--&gt;`）、特性检测库（如Modernizr）或者使用PostCSS等工具来自动转换CSS，以实现更好的浏览器兼容性和维护性。此外，使用最新的CSS...

    IE Hack兼容性调整

    现在，更推荐使用条件注释、CSS前缀、或者使用如Autoprefixer这样的工具自动生成浏览器特定的CSS，以减少对Hack的依赖。同时，尽可能升级用户到最新浏览器，或使用渐进增强和优雅降级的策略，可以提高网页的跨浏览器...

    网页制作中十个最好的CSS hacks

    IE浏览器特有的条件注释可以用来为特定版本的IE添加专门的CSS样式，例如这里的`&lt;!--[if lt IE 7]&gt;`，将只在IE7以下版本生效。 这些CSS hacks和技巧是前端开发者在应对浏览器兼容性挑战时常用的工具。熟练掌握它们...

    div+css学习资料

    "CSS hacks與爭議"讨论了对浏览器差异的处理，以及CSS hack的利弊，提醒开发者应谨慎使用，尽可能保持代码的干净和标准化。 "css id如何避免与开发人员的id命名重复"提出了关于ID命名的一些建议，如使用前缀，避免...

    （英文）The CSS Anthology: 101 Essential Tips, Tricks & Hacks 2009

    - **条件注释**：针对IE特定版本的代码。 - **CSS Hack**：特定浏览器的样式规则。 - **测试工具**：使用开发者工具和在线服务进行调试。 8. **可访问性** - **ARIA标签**：增强辅助技术的支持。 - **屏幕阅读...

    网页兼容问题、IE、FireFox

    为了解决这些问题，开发者通常会使用“条件注释”（Conditional Comments），这是一种专为IE设计的特殊语法，可以针对不同版本的IE插入特定的CSS或脚本代码。 例如： ```html &lt;!--[if lt IE 8]&gt; ...

    swiper@4.5.1兼容ie

    3. **CSS Hacks**：在某些情况下，为了适应IE的特定渲染方式，Swiper可能使用CSS hack，如条件注释、特定的选择器或者属性前缀，来确保样式在IE中正确显示。 4. **JavaScript Shim**：对于某些JavaScript API的缺失...

    针对IE6的一些CSS Hack编写时的注意点小结

    3. 同时区分IE8、IE7、IE6、Firefox的CSS Hacks： - 可以通过多重CSS属性覆盖的方式，为不同浏览器设置不同的样式。例如： ```css .test { color: #000; /* Firefox */ color: /*\**/#00f\9; /* IE8 */ *color...

    padding ie 不兼容问题

    值得注意的是，上述方法虽然在历史上被广泛使用，但这些IE专有的CSS hacks和条件注释并不是跨浏览器兼容性的最佳实践。随着现代浏览器对标准的广泛支持，最佳实践是尽量避免使用这些技术，而是采用标准的、兼容所有...

Magicbox
Global site tag (gtag.js) - Google Analytics