Here is the list of 10 hand picked CSS hacks and tricks which can help you in your CSS code and also save some time.
1. Vertical align div (垂直居中)
http://stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height (最小高度)
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency (透明png)
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear (自动清除)
.container:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.container {display: inline-table;}
/* Hides from IE-mac \*/
* html .container {height: 1%;}
.container {display: block;}
/* End hide from IE-mac */
5. Reset CSS (CSS重设)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,th,td {
margin:0; padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;font-weight:normal;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
q:before,q:after {content:”;}
6. Scrolling Render IE (IE滚动条渲染)
html {
background : url(null) fixed no-repeat;
}
7. Opacity (透明度)
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8. PRE Tag (标签预格式)
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
9. Li Background Repeat IE (LI标签背景重复)
10. Good to know (最好知道的)
@charset “UTF-8″;
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/