웹 제작을 위한 10가지 최고의 CSS 해킹_경험 교환

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

다음은 귀하의 작업에 도움이 될 수 있는 직접 선택한 10가지 CSS 해킹 및 트릭 목록입니다. CSS 코드를 작성하고 시간도 절약할 수 있습니다.

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

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

2. 최소 높이  (最小高島)

선택기 {
min-height: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 {
글꼴 스타일:일반;글꼴-가중치:일반;
}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {글꼴 크기 :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 */
공백: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

9. Li 배경 반복 IE(LI标签背景중复)





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

@charset “UTF-8″;

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

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

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

/* ———— ———————————————————-
MacIE
—————————————————————— - */
/***/
선택기{속성:값;}
/**/