最常用的10条CSS hacks » 荒野无灯weblog

Keep It Simple, Stupid.

荒野无灯weblog

最常用的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.指定最小高度

selector {
min-height:500px;
height:auto; !important
height:500px;
}

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

[cc lang="html"]

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

.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自动清除浮动

.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

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

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

7.透明层

#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}

8.pre 标签

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.一些应该知道的东东

@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

Tagged in : CSS hacks

All Comments (0)
Gravatar image
No Comments