【图片预加载】
完整的兼容代码如下：
<style>
#preloader { background-image:url(img01.jpg); background-image:url(img02.jpg); background-image:url(img03.jpg); width:0; height:0; display:inline }/*IE6 7 Images you want to preload*/
body:after { content:url(img01.jpg) url(img02.jpg) url(img03.jpg); display:none }/*preload for other Browser*/
</style>
<body>
<!--[if (IE 6)|(IE 7)]><div id="preloader"></div><![endif]-->
</body>
出处：http://www.daimaren.cn/archives/271
CSS 创建content
在CSS2中介绍了一个叫做content的 属性，它连同 :before和 :after这两个伪类使用，可以让我们在文档上创建容器。最有趣的content应用是它允许使用url()来调用一个图 像：
content: url(img01.jpg);
这可以让我们预加载一张图片，那么多个图片呢？下面这个展示了content的强大，它可以允许放置多个url：
content: url(img01.jpg) url(img02.jpg) url(img02.jpg)
多么简洁，我们可以用一行CSS搞定多个图片的预加载，以上代码支持以下浏览器：
* IE8+
* FF2+
* Safari 3+
* Chrome 1+
* Opera 9.62+
组合
我们知道如何用CSS预加载图片了，把它们放在一起：
body:after
{
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
我们将content应用在在body标签被创建后，然后隐藏它，这样预加载的图片不会显示但仍然在加载，这样将拥有一个纯CSS的不用标签的预加 载。
近乎完美
邪恶的IE系列（IE6/IE7）不支持content，因此也不会预加载任何图片。但是这将是一个较小的利弊权衡，IE6/7用户将直接读取图片，而不 是从缓存中读取。
一种解决它们支持不足的方案是使用IE 条件注释，如果是IE6/7就用标签里隐藏图片的方式预加载，或者是加空标签并设置它的背景图片，如：
#preloader {
/* Images you want to preload*/
background-image: url(image1.jpg);
background-image: url(image2.jpg);
background-image: url(image3.jpg);
width: 0px;
height: 0px;
display: inline;
}
完整的兼容代码如下：
<style>
/*IE6/7*/
#preloader {
/* Images you want to preload*/
background-image: url(img01.jpg);
background-image: url(img02.jpg);
background-image: url(img03.jpg);
width: 0px;
height: 0px;
display: inline;
}
/*preload for other Browser*/
body:after
{
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
</style>
<body>
<!--[if (IE 6)|(IE 7)]>
<div id="preloader"></div>
<![endif]-->
</body>
