10个最常用的CSS Hack

转载自：http://stylizedweb.com/2008/02/14/10-best-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.

====================== 割 ======================

前端开发人员都明白浏览器兼容性、符合标准的CSS和xhml代码的重要性，同时我们在各大浏览器的Hack或补丁上花费大量的时间，早先的时候写过关于PNG透明问题，输入框黄色背景，div垂直居中等。

以下总结出10条手写CSS Hack，帮助你节省时间并更好的书写CSS。

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

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. 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

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