1、display:inline-block 非常好用的CSS属性，随着FF3和IE8开始支持，实在是居家旅行必备良品。以前为了让一些内联元素具有高度经常动不动就做浮动，真是笨！
display:inline-block“将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格”。
.replacement{
display:inline-block; /*for FireFox3 beta、IE8 beta、Opera、Safari...*/
display:-moz-inline-stack; /*for FireFox2 */
*display:inline;/*for ie6-7 */
zoom:1; /*触发IE的haslayout属性*/
line-height:9999em;
overflow:hidden;
font-size:0;
vertical-align:middle;
margin:10px;
width:100px;
height:100px;
/* for pic*/
background:url(img/2.jpg) no-repeat 0 0;
}2、利用text-indent来隐藏文字。之前不知道这招的意义所在，因为用display:none同样可以实现隐藏。关键就在于，通常我们习惯用宝贵的H1来作为网站logo的标签以利于SEO，如果使用display:none的话，那么势必会为logo图片多添加一个标签，或者是在H1里嵌套多一个标签隐藏起来放文字；而使用text-indent来隐藏文字，只需要一个H1标签就可以解决所有问题了。
h1 {
text-indent:-9999px;/*Hide Text, keep for SEO*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}3、用IE滤镜实现的IE6png图像透明，窃以为还不错，以彼之道，还施彼身，反正就是IE那点破事，就让IE滤镜解决吧。
缺点：该滤镜对背景图支持不太好，遇背景图考虑用JS脚本。
该滤镜需添加IE条件注释，只能直接写进html里。
<!--[if lte IE 6]>
<mce:style type="text/css"><! /* ie png hack */ #header { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=/images/default/header.png, sizingMethod=scale); } -->
<!--[endif]-->参考阅读
4、CSS跨浏览器实现半透明状态
.yourClass {
filter:alpha(opacity=50);/*Needed for IE*/
-moz-opacity:0.5;/*Older mozilla broswers like NN*/
-khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/
opacity: 0.5;/*FF, Safari, and Opera*/
}参考阅读：
5、解決IE6不支援css min-width與min-height
/*最小高度的解決*/
.Elm {
min-height:100px;
height: auto !important;
height: 100px;
}
/*最小宽度的解決*/
.Elm {
min-width:100px;
width: auto !important;
width: 100px;
}裡面的祕訣，是先利用較新的瀏覽器認得min-width/height，因此透過它來指定值,而IE舊版的瀏覽器則是透過width/height取值。
不過這裡有個衝突，就是新的瀏覽器也認得width/height，因此min-width/height會被width/height改寫，解決的辦法，就是中間那一行
height: auto !important;(以及width: auto !important;)
由於它標示!important，所以下面那行height無法取代上面這一行，間接變成新的瀏覽器忽視掉第三行，而讓高度不受第三行影響。
另外由於舊的IE瀏覽器不認得 min-height和 !important的意思，所以它還是只吃第三行的語法，這樣就可以相安無事，皆大歡喜。
6、跨浏览器圆角——支持IE6IE7——不可能！！！
.rounded{
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
border-radius:5px;
}7、跨浏览器的纯CSS提示
<style type="text/css">
a:hover {
background:#ffffff;
text-decoration:none;} /***** 背景色对IE6来说是必须的 ****/
a.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
a.tooltip:hover span{
display:inline;
position:absolute;
background:#ffffff;
border:1px solid #cccccc;
color:#6c6c6c;
}
</style>
Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.8、在链接后面添加一个文件类型图标
a[href^="http://"] {
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}
