웹 제작을 위한 10가지 최고의 CSS 해킹

프런트 엔드 코더라면 크로스 브라우징, 유효한 CSS 및 xHTML 코드를 만드는 것이 얼마나 중요한지 알아야 합니다. 또한 우리가 다양한 브라우저에 대한 모든 해킹 및 수정 작업에 얼마나 많은 시간을 소비하고 있는지도 알아야 합니다. 이전에 PNG 투명성 문제, 웹 양식의 노란색 필드, 수직 정렬 div 등에 관해 그 중 일부에 대해 썼습니다.

여기에 손으로 고른 CSS 해킹 및 요령 10가지 목록이 있습니다. CSS 코드를 작성하고 시간도 절약할 수 있습니다. 

1. 수직 정렬 div  (垂直居中) 

http:/ 
* html 선택기{속성:값;} 
/*stylizedweb.com/2008/02/01/vertical-align-div/ 

2. 최소 높이  (最작은 높이) 

선택기 { 
최소 높이:500px; 
높이:자동; !중요 
높이:500px; 
} 

3. PNG 투명성  (透明png) 

http://stylizedweb.com/2007/12/30/png-transparency-issues/ 

4. 자동 지우기(自动清除) 

.container:after { 
content: '.'; 
디스플레이: 차단; 
높이: 0; 
지우기: 둘 다; 
가시성: 숨김; 
} 
.container {display: inline-table;} 
/* IE-mac에서 숨김 */ 
* html .container {height: 1%;} 
.container {display : 차단;} 
/* IE-mac에서 숨기기 종료 */ 

5. CSS 재설정(CSS중设)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset, input,p,blockquote,th,td { 
여백:0; 패딩:0; 
} 
테이블 {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:이전,q:이후 {내용:”;} 

6. 스크롤링 렌더링 IE (IE滚动条渲染) 

html { 
배경 : url(null) 고정 반복 없음; 
} 

7. 불투명도(透명도) 

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

8. PRE 태그(标签预格式) 

pre { 
white-space: pre-wrap; /* css-3 */ 
공백: -moz-pre-wrap !important; /* Mozilla, 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标签背景重复) 

 
<스타일> 
#leftnav li { zoom: 1;} /* haslayout=true */ 
 
 

10. 알아두면 좋은 점 (最好知道的) 

@charset “UTF-8″; 

/* ———————————————————————- 
WinIE7 
——————————— ————————————- */ 
*:first-child+html 선택기{속성:값;} 

/* —————————— —————————————- 
WinIE6 및 Mac IE 
—————————————————————- */
* html 선택기{속성:값;} 

/* ——————————————————————- 
WinIE6 
——————————————————————- */ 
/***/ 

/* ———— ———————————————————- 
MacIE
—————————————————————— - */ 
/***/ 
selector{property:value;}
/**/

더 보기 웹 페이지 제작을 위한 최고의 CSS 꿀팁 10가지 기사, PHP 중국어 웹사이트를 주목해주세요!