Die zehn besten CSS-Hacks für die Weberstellung

 Wenn Sie Frontend-Programmierer sind, müssen Sie wissen, wie wichtig es ist, browserübergreifend 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 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 Hintergrundwiederholung 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;}
/**/

Weitere Top Ten der besten CSS-Hacks zum Erstellen von Webseiten für Verwandte Artikel, achten Sie bitte auf die chinesische PHP-Website!