您当前位于: 首页 » web前端编程 » CSS hack几个新的标识符 – 区分IE7、IE6、FF和Opera

CSS hack几个新的标识符 – 区分IE7、IE6、FF和Opera01/09/2008

1、!ie
  IE7修复了!important这个区分IE、FF等很爽的hack,现在只能用它对付IE6及以前的版本了。同时,人们也发现了IE7的BUG,就是这个 !ie,其适用于(这里的“适用于”是“……能够认识”的意思,下同)IE7及以前版本,也就是说,这个!ie能区分目前的IE和其他浏览器,不敢保证未来的IE版本是否修复此BUG,当然这样的代码将不符合CSS语法规则。看例子:
[codes=html]
<html>
  <head>
    <title>测试页面</title>
    <style type="text/css">
      p
      {
        background: red;
        background: green!ie;
      }
    </style>
  </head>
  <body>
    <p>难道你家的馒头是圆的?(注意IE和FF下背景的不同)</p>
  </body>
</html>
[/codes]

2、!important!
  虽然IE7修复了!important,但是IE7又继续在这个!important!上栽跟头,注意后面有个感叹号,同样可以利用来区分目前市面上的IE和其他浏览器,代码不符合CSS语法标准。继续拿前面的例子来演示:
[codes=html]
<html>
  <head>
    <title>测试页面</title>
    <style type="text/css">
      p
      {
        background: red;
        background: green!important!;
      }
    </style>
  </head>
  <body>
    <p><strong>听说你家的馒头都是圆的?(注意IE和FF下背景的不同)</strong></p>
  </body>
</html>
[/codes]

3、!sb,!tmd,!microsoft,!google,!orZ,!r
  我被老外忽悠了,并非只有!ie这个特殊字符串,只要是感叹号后面跟个字符串甚至不要跟字符串,都能区别IE和其他浏览器,郁闷,真是尽信老外不如无老外!
[codes=html]
<html>
  <head>
    <title>测试页面</title>
    <style type="text/css">
      p
      {
        background: red;
        background: green!;/*看看这个页面的效果吧,当然感叹号后面可以跟一些字符串除了"important"*/
      }
    </style>
  </head>
  <body>
    <p><strong>听说你家的馒头都是圆的?(注意IE和FF下背景的不同)</strong></p>
  </body>
</html>
[/codes]

4、html*
*html,和html>body,_height:10px,*height:10px,这几个hack应该不算是陌生的东西了,而这个html*还是个比较有意思的!需要注意html和后面的*号之间不能有空格。例如:
[codes=html]
<html>
  <head>
    <title>测试页面</title>
    <style type="text/css">
      html*{
        border:3px solid #066;
        padding:4px;
        display:block;
        background:#999;
      }
      p
      {
        background: red;
      }
      body{
        background:#fff;
      }
    </style>
  </head>
  <body>
    <p>我还没有吃晚饭,你吃了吗?–摘自和某MM的聊天记录</p>
    <!–这个是大家都看不见的注释,在IE下居然会关联到本行–>    
    <p>物理学家指出:由于受到地心引力的影响,在常规的环境下要制造出绝对圆(球)形的物体是不可能的</p>
  </body>
</html>
[/codes]
这里面会出现一个新的非常有意思的问题,就是对注释的不同解释~。

参考文章:
   CSS Hacks: http://www.webdevout.net/css-hacks
   IE’s universal selector is really universal:http://www.stilbuero.de/2006/09/17/ies-universal-selector-is-really-universal/

2,191位童鞋围观 | 1条评论标签:  

1条评论
  1. 虫儿飞 说:

    文章很不错的!正好最近再学习这个。谢谢。收下了。

发表评论

(发广告、垃圾评论者请慎重,点击左边按钮可能会造成下半身永久性创伤)