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

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

更多网页制作中十个最好的CSS hacks相关文章请关注PHP中文网！

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

0

查看详情