Wenn Sie ein Front-End-Programmierer sind, müssen Sie wissen, wie wichtig es ist, Cross-Browsing-, gültigen CSS- und xHTML-Code zu erstellen. Und Sie müssen auch wissen, wie viel Zeit wir mit all diesen Hacks und Korrekturen für verschiedene Browser verbringen. Über einige davon habe ich schon früher zu Themen wie PNG-Transparenz, gelbe Felder im Webformular, vertikale Ausrichtung von Div-Elementen usw. geschrieben.
Hier ist die Liste von 10 handverlesenen CSS-Hacks und -Tricks, die Ihnen dabei helfen können CSS-Code und sparen Zeit.
1. Vertical align div (垂直居中)
http:/
* html selector{property:value;}
/*stylizedweb.com/2008/02/01/vertical-align-div/
2. Min-Height (最小高度)
selector {
min-height:500px;
height:auto; !important
height:500px;
}
3. PNG-Transparenz (透明png)
http://stylizedweb.com/2007/12/30/png-transparency-issues/
4. Autoclear (自动清除)
.container:after {
content: “.“;
Anzeige: Block;
Höhe: 0;
klar: beide;
Sichtbarkeit: versteckt;
}
.container {display: inline-table;}
/* Versteckt vor IE-Mac */
* html .container {height: 1%;}
.container {display : block;}
/* End hide from IE-mac */
5. Zurücksetzen 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; Polsterung: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. Deckkraft (透明度)
#transdiv {
filter:alpha(opacity=75);
-moz-opacity:.75;
Deckkraft: .75;
}
8. PRE Tag (标签预格式)
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, seit 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标签背景重复)
10. Gut zu wissen (最好知道的)
@charset “UTF-8″;
/* ——————————————————————-
WinIE7
——————————— ————————————- */
*:first-child+html selector{property:value;}
/* —————————— —————————————-
WinIE6 & Mac IE
——————————————————————- */
* html selector{property:value;}
/* ——————————————————————-
WinIE6
———————————————————————- */
/***/
/* ———— ———————————————————-
MacIE
————————————————————— - */
/***/
selector{property:value;}
/**/
