hack总结
by Gary on 十二.19, 2008, under CSS, 学习
转自五月阳光
以前的那片丢掉了，补转一篇，偶是剽窃高手…正文如下
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.
(注意写法.记得该声明位置需要提前.)
<style>
#wrapper{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
1.
*+html 与 *html 是IE特有的标签, firefox 暂不支持.
而*+html 又为 IE7特有标签.
<style>
#wrapper{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明,
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>
2.
表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：
IE5，IE6 ，IE7浏览器识别；
FF2.0，Opera 9，Safari 2浏览器不识别。
结论：我们可以用”+”来实现只有IE识别的CSS Hack。
比如我们要实现在IE中500px的宽度，而在其他浏览器480px的宽度，就可以通过”+” Hack来完成，如下：
#hack {
width:500px;
+width:480px; /*only IE*/
}
3.
用于内联css
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
4.
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
3,IE7的hack
IE7 修复了很多 bug，也增加了对一些选择符的支持，所以现在诸如 *html {} 和 html>body {} 等针对 IE 隐藏或显示的 hack 都会在 IE7 中失效。虽然 CSS Hack 不推荐使用，条件注释才是万无一失的过滤器，但是条件注释只能出现在 HTML 中，CSS Hack 还是有用武之地的。Nanobot 发现了一些针对 IE7 的 CSS Hack，具体就是：
>body
html*
*+html
这三种写法，其中前两种都是不合法的 CSS 写法，在标准兼容浏览器中被被忽略，但是 IE7 却不这么认为。对于 >body ，它会将缺失的选择符用全局选择符 * 代替，也就是将其处理成了 *>body，而且不光对于 > 选择符，+,~ 选择符中这个现象也存在。对于 html* ，由于 html 和 * 之间没有空格，所以也是一种 CSS 语法错误，但 IE7 不会忽略，而是错误地认为这里有一个空格。对于第三种 *+html，IE7 认为 html 前面的 DTD 声明也是一个元素，所以 html 会被选中，这三种方法中只有这一种方法是合法的 CSS 写法，也就是说可以通过校验器的验证，因此也是作者推荐的 hack 用法。
IE 6 and below
Use * html {} to select the html element.
IE 7 and below
Use *+html, * html {} to select the html element.
IE 7 only
Use *+html {} to select the html element.
IE 7 and modern browsers only
Use html>body {} to select the body element.
Modern browsers only (not IE 7)
Use html>/**/body {} to select the body element
4,区别IE的版本
<!–[if IE]> Only IE <![endif]–>
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
<!–[if lt IE 6]> Only IE 6- <![endif]–>
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
注意
1.条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
3.条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。我很想把所有特殊的样式放在logo.css 里。但是很不幸的是，这看起来不太可能。我也试过根据条件注释，使用来导入一个额外的样式表，但是因为我只需要一个额外的样式规则，这样会让事情变得复杂很多。当然如果你需要在IE里使用很多的额外的样式，那么使用或许是一个好的方法。
就象这样：
<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
For Non-IE：
在注释中嵌套注释，这样首尾还原为两个注释，所以非IE浏览器可以显示中间的内容；而IE识别到“!IE”，所以将整个语句当成否定条件判断而不显示中间的内容。利用这样的用法即可在非IE中应用 Conditional Comments，酷！
<!–[if !IE]><!–> COOL!!! Non-IE <!–<![endif]–>
<!–[if IE 6]><!–> IE6 Or Non-IE <!–<![endif]–>
说明：
gt: greater than，选择条件版本以上版本，不包含条件版本
lt: less than，选择条件版本以下版本，不包含条件版本
gte: greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
!: everything except what directly follows the “!”(选择条件版本以外所有版本，无论高低)
-
Howdy. Welcome to 负罪者!
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. See ya around!
最近评论
