轉自國外網站，本想翻譯成中文，但是細看文章實在是簡單，如果看不懂這個，我想也就沒必要繼續做前端了。
If you are front end coder you must know how important is to make cross browses, valid CSS and xHTML code. And also you must know how much time we are spending in all those hacks and fixes for various browsers. I』ve written about some of them earlier on PNG transparency issues, Yellow fields in web form, Vertical align div etc..
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 (垂直居中)
到這裡看看...
網友建議：這個地址做的並不專業。用postion定位並不合適，因為在全屏下看上去是垂直居中，但是如果把窗口拉小後問題就出現了！個人認為並不值得推廣。
2. Min-Height (最小高度)
程序代碼
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG transparency (透明png)
到這裡看看...
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標籤背景重複)
程序代碼
<!–[if lt IE 7]>
<style>
#leftnav li { zoom: 1;} /* haslayout=true */
</style>
<![endif]–>
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;}
/**/
