Ifyouarefrontendcoderyoumustknowhowimportantistomakecrossbrowses,validCSSandxHTMLcode.Andalsoyoumustknowhowmuchtimewearespendinginallthosehacksandfixesforvariousbrowsers.I'vewrittenaboutsomeofthemearlieronPNGtransparencyissues,Yellowfieldsinwebform,Verticalaligndivetc..
Hereisthelistof10handpickedCSShacksandtrickswhichcanhelpyouinyourCSScodeandalsosavesometime.
1.Verticalaligndiv(垂直居中)
http://stylizedweb.com/2008/02/01/vertical-align-div/
2.Min-Height(最小高度)
selector{
min-height:500px;
height:auto;!important
height:500px;
}
3.PNGtransparency(透明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;}
/*HidesfromIE-mac*/
*html.container{height:1%;}
.container{display:block;}
/*EndhidefromIE-mac*/
5.ResetCSS(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.ScrollingRenderIE(IE滚动条渲染)
html{
background:url(null)fixedno-repeat;
}
7.Opacity(透明度)
#transdiv{
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
8.PRETag(标签预格式)
pre{
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap!important;/*Mozilla,since1999*/
white-space:-pre-wrap;/*Opera4-6*/
white-space:-o-pre-wrap;/*Opera7*/
word-wrap:break-word;/*InternetExplorer5.5+*/
}
9.LiBackgroundRepeatIE(LI标签背景重复)
<!–[ifltIE7]>
<style>
#leftnavli{zoom:1;}/*haslayout=true*/
</style>
<![endif]–>
10.Goodtoknow(最好知道的)
@charset“UTF-8″;
/*———————————————————————-
WinIE7
———————————————————————-*/
*:first-child+htmlselector{property:value;}
/*———————————————————————-
WinIE6&MacIE
———————————————————————-*/
*htmlselector{property:value;}
/*———————————————————————-
WinIE6
———————————————————————-*/
/**/
*htmlselector{property:value;}
/**/
/*———————————————————————-
MacIE
———————————————————————-*/
/**//*/
selector{property:value;}
/**/