网页制作中十个最好的CSS hacks

ttx9n

转自国外网站，本想翻译成中文，但是细看文章实在是简单，如果看不懂这个，我想也就没必要继续做前端了。  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  (垂直居中)

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标签背景重复)

<!–[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;}
/**/

fwn2rd

哈哈哈哈哈哈哈

8ayoqrpj

而非为吾问无为谓娃娃

mkonji

啊，数码撒飒飒飒飒

shijie798

挺不错的东西

kestlhoxn

好东西可以可以可以可以

6ox8dn

哈哈哈哈哈哈

6hruhg

哈哈哈哈哈哈

7jbiiz

很好，谢谢分享

溪谷玉贤

我要金豆金豆金豆