十個最好的CSS hacks
1. Vertical align div (垂直居中)
到這裡看看...
網友建議:這個地址做的並不專業。用postion定位並不合適,因為在全屏下看上去是垂直居中,但是如果把窗口拉小後問題就出現了!個人認為並不值得推廣。
2. Min-Height (最小高度)
程序代碼
selector {
min-height:500px;
height:auto; !important
height:500px;
}
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 */
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:」;}
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;
}
background : url(null) fixed no-repeat;
}
7. Opacity (透明度)
程序代碼
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
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+ */
}
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;}
/**/
/* ———————————————————————-
WinIE7
———————————————————————- */
*:first-child+html selector{property:value;}
/* ———————————————————————-
WinIE6 & Mac IE
———————————————————————- */
* html selector{property:value;}
/* ———————————————————————-
WinIE6
———————————————————————- */
/*\*/
* html selector{property:value;}
/**/
/* ———————————————————————-
MacIE
———————————————————————- */
/*\*//*/
selector{property:value;}
/**/
引用文章:http://www.wowbox.com.tw/blog/trackback.asp?tbID=3281&action=addtb&tbKey=4b023e2e11aa37ae188145c32fb220cf0b8f01ac
留言