www.baike369.com
百科369 > CSS教程 > CSS Hack技巧大全

CSS Hack技巧大全


CSS Hack技巧大全

不同的浏览器对CSS的“理解”可能不一样,因此会导致生成的网页的显示效果不一样,更严重的,可能由于浏览器本身的错误而出现网页显示不完全或者错位等问题。

这时候就需要针对不同的浏览器去写不同的CSS了,以使网页在不同的浏览器内的效果基本一致。由于网页的重点在于“易用”和“友好”,因此不必追求在不同的浏览器内显示效果必须完全一致。

针对不同的浏览器书写不同的CSS规则,这就叫CSS Hack。其实这更像一种过滤手法,利用一些方法,过滤掉某些浏览器。


CSS Hack不是必须的

在实际应用中,针对不同元素设定CSS,可以完成一样的效果,因此很多情况下可以通过修改CSS的方案来避免使用CSS Hack。


常用的CSS Hack

如果只有少数的地方使用了CSS Hack,可以直接写在样式表中;如果有比较多而且复杂的CSS Hack,则最好写在单独的CSS文件中,然后链接到页面内。

1. IE条件注释

IE专有的条件注释是相对安全的过滤方法。

在(X)HTML内添加注释可以方便阅读和分析代码,在注释标签内的内容不会被浏览器显示。

从IE 5.0开始,可以使用一种“条件注释”,IE会根据注释中的条件判断是否解释注释中的内容。语法格式如下:

<!--[if 条件]>
这里是正常的(X)HTML代码
<![endif]-->

1)条件注释的基本结构和(X)HTML的注释(<!-- -->)是一样的,因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

2)IE将会根据“if 条件”来判断是否如解析普通的页面内容一样解析条件注释里的内容。

3)条件注释使用的是(X)HTML的注释标签,因此它们只能使用在(X)HTML文件里,而不能在CSS文件中使用。

实例:

使用下面的代码检测当前IE浏览器的版本。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS Hack使用if条件注释检测当前IE浏览器的版本实例-www.baike369.com</title>
</head>
<body>
<!--[if IE]>
    <h1>您正在使用的是IE浏览器</h1>
    <!--[if IE 5]>
      <h2>版本 5</h2>
    <![endif]-->
    <!--[if IE 5.0]>
      <h2>版本 5.0</h2>
    <![endif]-->
    <!--[if IE 5.5]>
      <h2>版本 5.5</h2>
    <![endif]-->
    <!--[if IE 6]>
      <h2>版本 6</h2>
    <![endif]-->
    <!--[if IE 7]>
      <h2>版本 7</h2>
    <![endif]-->
    <!--[if IE 8]>
      <h2>版本 8</h2>
    <![endif]-->
<![endif]-->
<!--[if !IE]><!-->
<h1>您使用的不是IE浏览器!</h1>
<!--<![endif]-->
</body>
</html>

显示效果如下:

CSS Hack使用if条件注释检测当前IE浏览器的版本实例的操作效果

在Google Chrome浏览器中显示使用的不是IE浏览器,而在IE浏览器中则会根据不同的版本显示不同的文字。

同时,条件注释还可以添加以下逻辑判断的参数:

  • lte:Less than or equal to,小于或等于。
  • lt:Less than,小于。
  • gte:Greater than or equal to,大于或等于。
  • gt:Greater than,大于。
  • !:不等于,非。

例如下面的代码:

<!--[if gt IE 5.5]>(如果IE版本大于5.5)
<!--[if lte IE 6]>(如果IE版本小于等于6)

条件注释可以在(X)HTML文档内使用,因此可以在<head>内,针对不同版本的IE来调用不同的CSS文件。比如:

<head>
......
<!--默认先调用basic.css样式表-->
<link rel="stylesheet" type="text/css" href="basic.css" />
<!--[if lte IE 5.5]>
<!--如果IE浏览器版本小于或等于5.5,调用ie5.css样式表-->
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
<!--[if IE 6]>
<!--如果IE浏览器版本为6,调用ie6.css样式表-->
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
......
</head>

也可以使用下面的代码格式:

<head>
......
<!--[if lte IE 5.5]>
<!--如果IE浏览器版本小于或等于5.5-->
<style type="text/css">
/* 针对IE 5.5及以前版本的CSS */
</style>
......
</head>

条件注释,对于非IE浏览器,等同于注释,因此可以通过W3C的校验。

2. 子选择器

由于IE 6.0和更早的版本不支持子选择器,因此可以使用子选择器对这些浏览器隐藏规则。

为了让这种过滤方法起作用,必须确保在子选择器前后没有空格。例如:

<style type="text/css">
<!--
#hack1{
  border:1px solid #36C;
  line-height:24px;
  margin:10px 0;
  background:#9CF url(img/bg1.gif) repeat-x;
}
body>#hack1{
  background-image: url(img/bg1.png);
}
-->
</style>
<body>
<div id="hack1">IE 6及以前的版本不支持透明的PNG图片。</div>
</body>

由于IE 6.0及更早版本不支持透明的PNG图片,因此首先对“hack1”层设定了“bg1.gif”图片为背景图片,而对于支持子选择器的浏览器将使用“body>#hack1”内定义的“bg1.png”图片为背景。

注意:要保证子选择器“body>#hack1”的权重值高于前面的选择器。请阅读CSS层叠。

3. 相邻选择器

由于IE 6.0及更早的版本不支持相邻选择器,因此这种选择器经常用于对IE 6.0隐藏某些CSS规则使用。例如:

div+p{color:red;}

请阅读CSS相邻选择符。

4. 属性选择器

IE 6.0及更早的版本也不支持属性选择器,因此可以使用属性选择器在比较高级的浏览器内对类和ID应用样式。例如:

body[id="hack"]{
  background-image: url(img/bg1.png);
}

请阅读CSS属性选择符。

5. “*html”

星号“*”为通配符,表示所有的元素,而<html>元素为根元素。

但是,IE 6.0及更早的版本有一个匿名的根元素,它包围着<html>元素,因此可以使用通配选择器制定包围在<html>元素外的这个匿名元素,从而只针对IE 6.0及更早的版本设定CSS规则,其它的浏览器则会忽略这些规则。例如:

*html{font-size:x-small;}
*html div{color:red;}

6. !important

IE 6.0及更早的版本不能识别“!important”,因此可以制定下面的规则:

#hack1{
  background:#9CF url(img/bg1.png) repeat-x !important;
  background-image:url(img/bg1.gif);
}
<div id="hack1">
IE 6及以前的版本不支持透明的PNG图片
</div>

对于IE 7.0及Firefox、Opera等浏览器,将使用“!important”声明的“bg1.png”图片,而由于IE 6.0及更早的版本不支持“!important”,因此根据层叠的规定,将使用“bg1.gif”图片替代前面定义的“bg1.png”图片。

特别需要注意这2条规则的书写顺序,“!important”声明在前面,而希望IE 6.0接受的规则要放在后面。

7. 特殊字符

在CSS属性的前面或中间添加特殊的字符也可以达到过滤某些浏览器的目的。

例如,IE 6.0能识别下划线“_”和星号“*”,IE 7.0能识别星号“*”,但不能识别下划线“_”,而Firefox、Opera和Safari等浏览器则都不能识别。因此,可以利用这些特殊字符来针对不同的浏览器设定不同的CSS规则。例如:

#hack1{
  background:#9CF;
  *background:#CFC;
  _background:#FC6;
}
<div id="hack1">
  <p>background:#9CF -- Firefox、Opera和Safari都不能识别。</p>
  <p>*background:#CFC -- IE 7能识别“*”,不能识别“_”</p>
  <p>_background: #FC6 -- IE 6能识别“_”和“*”</p>
</div>

由于Firefox、Opera和Safari不能识别“*”和“_”开头的声明,因此会忽略,只接受第1条声明;IE 7.0不能识别“_”开头的声明,但是可以识别“*”开头的声明,因此依据层叠的规定,采用第2条声明;而IE 6.0可以识别“_”开头的声明,因此接受第3条声明。

如果只想针对IE设定某些声明,则可以只使用“*”。例如:

div{
  ......
  *width:100%;
}

如果只想针对IE 6.0设定某些声明,则可以只使用“_”。例如:

div{
  ......
  _height:100%;
}

8. CSS注释/**/

如果只想针对IE 6.0隐藏某些声明,则可以使用空格加CSS注释的方法来完成。例如:

#hack1{
background /**/:#FC6;
}
<div id="hack1">只有IE 6没有背景颜色。</div>

在属性和注释/**/之间有一个空格,只有IE 6.0无法识别此条声明,IE 7.0以及IE 5.5都可以识别。

Copyright© 2011-2016 www.baike369.com All Rights Reserved