최신 CSS Hack 요약을 빠르게 확인하세요.

IE 브라우저 차단(즉, IE에서는 표시되지 않습니다)

*:lang(zh) select {font:12px !important;} /*FF 전용*/
select:empty {font:12px !important;} /*사파리 표시*/

여기서 select는 상황에 따라 변경될 수 있는 선택기입니다. 두 번째 문장은 MAC의 Safari 브라우저에만 해당됩니다.

IE7에서만 인식됩니다.

*+html {...}

IE7 전용 스타일을 만들어야 할 때 이 HACK을 사용할 수 있습니다.

IE6 이하 식별

* HTML {...}

이 점에 특히 주의하십시오. 많은 집주인은 이것이 IE6용 HACK이라고 작성했습니다. 실제로 IE5.x도 이 HACK을 인식할 수 있습니다. 다른 브라우저에서는 인식하지 못합니다.

html/**/ >본문 선택 {……}

이 문장은 이전 문장과 같은 효과를 가집니다.

IE6만 인식하지 못함

select { 디스플레이 /*IE6는 인식하지 못합니다*/:none;}

여기서 가장 중요한 것은 콜론 앞에 공개되는 CSS 주석을 통해 속성과 값을 분리하는 것입니다.

IE6, IE5만 인식되지 않습니다.

select/**/ { 표시 /*IE6, IE5는 인식하지 못합니다*/:none;}

위 문장과의 차이점은 선택자와 중괄호 사이에 추가 CSS 주석이 있다는 것입니다.

IE5만 인식하지 못함

선택/*IE5는 인식하지 못합니다*/ { display:none;}

이 문장은 이전 문장에서 제거된 속성 영역의 코멘트입니다. IE5만 인식하지 못함

박스 모델 솔루션

select {너비:IE5.x 너비; 음성 계열:""}""; 음성 계열:상속; 너비:올바른 너비;}

박스 모델의 클리어 방법은 !important를 통해 처리되지 않습니다. 이 점은 명확해야 합니다.

클리어 플로트

선택:다음:"."; 디스플레이:블록 높이:0; 가시성: 숨김;

Firefox에서는 모든 자식이 부동 상태일 때 부모의 높이가 전체 자식을 완전히 덮을 수 없습니다. 그런 다음 이 HACK을 사용하여 부동을 지워 부모를 한 번 정의하면 이 문제가 해결될 수 있습니다.

줄임표 자르기

선택 { -o-text-overflow:ellipsis; 공백:nowrap;

이는 길이를 초과한 초과 텍스트를 자동으로 잘라내고 줄임표로 끝내는 아주 좋은 기술입니다. 단지 Firefox가 현재 이를 지원하지 않는다는 것뿐입니다.

오페라에서만 인정

@media all 및 (최소 너비: 0px){ 선택 {……} }

Opera 브라우저에 대해 별도로 설정하십시오.

위의 내용은 CSS 작성에 대한 몇 가지 HACK입니다. 이는 로컬 호환성 문제를 해결하는 데 사용됩니다. 호환성 내용을 분리하려면 다음 필터를 사용해 볼 수도 있습니다. 이러한 필터 중 일부는 필터를 통해 특수 스타일을 가져오기 위해 CSS로 작성되었으며, 일부는 조건을 통해 필요한 패치 스타일을 연결하거나 가져오기 위해 HTML로 작성되었습니다.

IE5.x용 필터, IE5.x만 표시됨

IE5/MAC 필터는 일반적으로 필요하지 않습니다.

조건부 해킹인 경우 IE

<!--[IE인 경우]> IE만 <![endif]-->

IE는 모두 인식합니다.

<!--[IE 5.0인 경우]> IE 5.0만 해당 <![endif]-->

IE5.0만 인식 가능

<!--[IE 5.0인 경우]> IE 5.0 이상에만 해당 <![endif]-->

IE5.0은 IE5.5에서 인식될 수 있습니다.

<!--[IE 6인 경우]> IE 6만 해당- <![endif]-->

IE6에서만 인식됩니다.

<!--[IE 6인 경우]> IE 6/+만 <![endif]-->

IE6 및 IE6 이하 IE5.x에서 인식 가능

<!--[IE 7인 경우]> IE 7만 해당/- <![endif]-->

IE7에서만 인식됩니다.

위의 내용은 포괄적이지 않을 수 있습니다. 향후 작업 문의에 편의를 제공하기 위해 이러한 기술을 요약하는 데 참여해 주시기 바랍니다. 동시에 이러한 HACK을 연구한 저자들에게 감사의 말씀을 전하고 싶습니다.