CSS Mastery 笔记(第八章 招数和过滤器)

1. 过滤单独的样式表

1) IE的有条件注释
<!-- [if IE]
<style type="text/css">
@import("ie.css");
</style>
-->
上述代码中只有IE才会接受ie.css。
再如：指定IE 5.0可以使用
[if IE 5]
指定IE5.5及以上
[if gte IE 5.5000]
指定IE 5和IE 5.5
[if lt IE 6]

2） 带通滤波器
Tantek 的中通滤波器（css传给IE5和5.5）
@media tty {
i{content:"";/*" "*/}} @import 'ie5x.css'; /*";}
}/* */
先进的浏览器将其解释为：
@media tty {
i {
content:"Blah, blah blah";
}
}
但是IE 5.x/Win却将其解释为：
@media tty {
i{
content:"blah";
/* blah */
}
}
@import 'ie5x.css';
/* blah */

2. 过滤单独的规则和声明

1） 子选择器招数
对IE5-6/Win 隐藏透明的北京png图像
html>body {
background-image: url(bg.png);
}
2） 属性选择器招数
div[id="content"] {
background-image: url(bg.png);
}
3） 星号html招数
指定IE6和更低版本（IE有一个匿名元素包围着html）
* html {
font-size: small;
}
4） 转义属性招数
IE 5.5/Win 不会忽略转义字符，而其他高级浏览器会对转义字符解析或者视而不见。
例如
#content {
width: 100px
}
IE 5.5将不认识width 而对该属性置之不理。
5） Tantek的框模型招数（作者不推荐）
div.content {
width:400px;
voice-family: ""}"";
voice-family:inherit;
width:300px;
}
对Opera，需要
html>body .content {
width:300px;
}
6） 修改后的简化框模型招数
* html #content {
width: 80px;
width: 100px;
}
html #content {
width: 100px;
padding: 10px;
}
7） !impotant招数和下划线招数
#nav {
position: fixed !important;
position: static;
}
Windows 下的IE6或者更低版本会对!important 视而不见所以忽略第一个声明而应用第二个，但是其他高级浏览器会应用第一个声明，因为!important 提高了这一声明的优先级。
#nav {
position: fixed;
_position: static;
}
Windows 下的IE6或者更低版本会对下划线（_）视而不见所以忽略第一个声明而应用第二个，但是其他高级浏览器也会应用第一个声明，因为不认识_XXX这个属性而忽略它。
8） Owen招数
head:first-child+body {
background-image: url("bg.png");
}
对符合标准的浏览器body上添加一个背景png图片，但是对IE6/Win 和Opera6 隐藏。

PS: 网上有CSS Mastery 的电子书英文版，很有收藏的必要。由于比较大，没有办法直接放上来：〉