最常用的10条CSS hacks

1,垂直居中

[cc lang="html"]

Content

html, body {
height: 100%;
margin: 0;
padding: 0;
}

* {
margin:0px auto;
padding:0;
}

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac \*//*/
div#shim {
display: none;
}

html, body {
height: auto;
}
/* end hack */

/* ]]> */

see: http://stylizedweb.com/2008/02/01/vertical-align-div/

2.指定最小高度

1
2
3
4
5
selector {
min-height:500px;
height:auto; !important
height:500px;
}

3.PNG透明问题
ie6/7:
pngfix

[cc lang="html"]

还有一种就是纯CSS解决方案,因为当你的背景图片是在css文件中定义时,pngfix是无
能为力了。

1
2
3
4
5
6
7
8
9
10
11
.someelement {
background-image: url(images/image.png);
}
 
* html .someelemen {
background-color: #333;
back\ground-color: transparent;
background-image: url(images/blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="images/image.png", sizingMethod="scale");
}

see http://stylizedweb.com/2007/12/30/png-transparency-issues/

4.Autoclear自动清除浮动

1
2
3
4
5
6
7
8
9
10
11
12
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:0pt;
vertical-align:baseline;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
* {
margin:0pt;
padding:0pt;
}

6.Scrolling Render IE

1
2
3
html {
      background : url(null) fixed no-repeat;
     }

7.透明层

1
2
3
4
5
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

8.pre 标签

1
2
3
4
5
6
7
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

[cc lang="html"]

10.一些应该知道的东东

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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;}
/**/

本文译自:
10 best CSS hacks | StylizedWeb.com

更多
5 Responses Post a comment
  1. 无冷

    这个常用,但是太多了,老是记不全

  2. moper

    这个好像很好~呵呵~ :razz:

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS