网页制作中十个最好的CSS hacks-巨人网络通讯

主页 > 知识库 > 网页制作中十个最好的CSS hacks

网页制作中十个最好的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 Hack 汇总快查
CSS Hack 汇总速查手册浏览器兼容必会
CSS Hack收集汇总
浏览器兼容解决FF/IE6/IE7背景专用CSS HACK
特牛的FF/IE6/IE7专用CSS HACK
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
很不错的 CSS Hack 又学了一招
通过CSS Hack 区分 FF/IE7/IE6/IE5.5/IE5 代码推荐
CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

标签：大同潍坊玉树深圳潍坊石家庄商洛昭通

巨人网络通讯声明：本文标题《网页制作中十个最好的CSS hacks》，本文关键词网页制作,中,十个,最,好的,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。