幻想曲.Net

CSS Hack(1)

April 30th 2008,09:02 AM web standard hack 幻想曲 4 comments

!important;
严格来说，!important;应该不能算作是一种hack技术，被应用了!important;的属性将在IE中无效，对FF有效。
如以下这段，在FF中div1的背景将是红色,而在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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
   #div1
   {
     background:red !important;
     background:blue;
   }
  </style>
 </head>

 <body>
  <div id="div1">div1</div>
 </body>
</html>

Run This Code

* html 选择符 {…}
IE6及以下版本识别，对FF无效

<!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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
   
   #more
   {
   border:solid 1px blue;
   }
  * html #more
  {
    border:solid 1px red;
  }
  </style>
 </head>
 <body>
  <div id="more">asdf</div>
 </body>
</html>

Run This Code

select { 属性 /*屏蔽IE6*/:值;},仅IE6不识别，屏蔽IE6
主要是通过css的注释/*.....*/分开一个属性值与值，来屏蔽IE6

-------------------华丽的分隔符------------------------------
现在我对前端充满好奇与兴趣，打算转到前端了哈。

4 Responses

llinzzi April 30 2008 , 12:58

欢迎幻想兄转到前端！
此外!important方法是非常不可取的，会产生很多问题，比如这里你是为了hack掉ie6，但却增加了css的优先级，之后要修改这个css就很麻烦了。

#1
幻想曲 April 30 2008 , 13:35

@llinzzi:
嗯哈
那如果要实现同样的效果就得这样写咯
#div1
{
background:red ;
}
* html #div1
{
background:blue;
}

#2
llinzzi April 30 2008 , 16:35

#div1
{
background:red ; firefox
#background:yellow; ie7
_background:blue; ie6
}

#3
幻想曲 April 30 2008 , 16:41

@llinzzi:
这些定义的顺序可以打乱么？

#4