CSS 해킹은 IE6/IE7/FF_Experience 교환과 CSS의 완벽한 호환성을 달성하는 일반적인 방법입니다.

CSS가 다양한 브라우저와 호환된다는 것은 흔한 문제입니다. 다음 내용은 너무 새로운 것이 아니며 순전히 초보자에게 도움이 되기를 바랍니다. 1. CSS HACK
다음 두 가지 방법으로 오늘날 거의 모든 HACK을 해결할 수 있습니다.

1, !important

IE7의 !important 지원으로 인해 !important 방법은 이제 IE6에서만 사용할 수 있습니다. HACK (작성에 주의하세요. 선언 위치가 미리 나와 있어야 한다는 점을 기억하세요.)
width: 100px!important; */
너비 : 80px; /* IE6 */
}



2, FireFox용 IE6/IE77
*+html 및 *html은 IE 관련 태그이며, Firefox는 현재 이를 지원하지 않습니다. 그리고 *+html은 IE7의 고유 태그입니다.
*+html IE7용 HACK은 HTML 상단에 다음 문을 확인해야 합니다.



2. 범용 float 클로저

clear float의 원리는 [구조적 마크업 없이 float를 지우는 방법]을 참조하세요.
Global CSS에 다음 코드를 추가하고 닫아야 하는 div에 class="clearfix"를 추가하면 항상 작동합니다.


3. 기타 호환성 팁

1. FF 아래의 div에 패딩을 설정하면 너비와 높이가 증가하지만 IE는 그렇지 않습니다. (!important로 해결 가능)
2. Centering 문제
1) line-height를 현재 div와 동일한 높이로 설정한 다음 Vertical-align: middle을 전달합니다. 내용을 감싸지 마세요.)
2) 가로 중심. margin: 0 auto; (물론 만능은 아닙니다.)
3. 표시 설정: block; (내비게이션 태그에서 공통)
4. FF와 IE 사이의 BOX에 대한 이해 차이로 인해 IE에서 float로 설정된 div가 2px 차이가 발생합니다.
5 , ul 태그는 FF 아래에 기본적으로 목록 스타일과 패딩이 있습니다. 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. (내비게이션 태그 및 콘텐츠 목록에서 흔히 발생함) 6. 외부 래퍼로 설정하지 마세요. div의 높이를 추가하는 것이 가장 좋습니다. 7. 손 커서 관련: 포인터 1 CSS입니다. Firefox ie6 ie7용 스타일 이제 대부분은 해킹에 !important를 사용하고 있으며 ie6 및 firefox에 대한 테스트는 정상적으로 표시될 수 있습니다. 그러나 ie7은 !important를 올바르게 해석할 수 있으므로 페이지가 실패하게 됩니다. 요구! 핀 찾기 IE7에 대한 좋은 해킹은 "*+html"을 사용하는 것입니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다. 이제 다음과 같은 CSS를 작성하세요. #1 { color: #333; } /* Moz */ * html #1 { color: #666 } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 그러면 글꼴 색상이 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #999로 표시됩니다. 2 CSS 레이아웃의 센터링 문제 주요 스타일 정의는 다음과 같습니다. body {TEXT-ALIGN: center;} #center {MARGIN-RIGHT: auto; MARGIN -LEFT: auto; } 설명: 먼저 상위 요소에 TEXT-ALIGN: center를 정의합니다. 이는 IE의 경우 상위 요소의 콘텐츠가 중앙에 있음을 의미합니다. 그러나 Mozilla에서는 중앙에 위치할 수 없습니다. 해결 방법은 하위 요소 정의를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "를 추가하는 것입니다. 이 방법을 사용하여 전체 페이지를 중앙에 맞추려면 다음을 수행하지 않는 것이 좋습니다. DIV로 설정하려면 여러 div를 순서대로 분할할 수 있습니다. 각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하면 됩니다.

상자 모델의 3가지 다른 해석

#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
# box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 부동으로 생성된 Double ie Distance

#box{ float:left; width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. //float를 무시합니다. 🎜 > block과 inline의 두 요소에 대해 자세히 설명하겠습니다. Block 요소의 특징은 다음과 같습니다. 항상 새 줄에서 시작하고 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있습니다(블록 요소). 인라인 요소의 특징은 다음과 같습니다. 다른 요소가 같은 줄에 있고... 제어할 수 없습니다(인라인 요소).

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. display:inline; //같은 결과를 얻음 행 배열 효과 diplay:table

IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반적인 너비와 높이를 처리합니다. 이는 큰 문제를 야기합니다.
이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 변경되지 않습니다. IE에서 너비와 높이를 높게 설정합니다.
예를 들어 배경 이미지를 설정하려면 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px ;}

6 페이지의 최소 너비

min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정할 수 있는 매우 편리한 CSS 명령입니다. 레이아웃은 항상 정확할 수 있습니다. 하지만 IE는 이를 인식하지 못하고
실제로는 너비를 최소 너비로 취급합니다. 이 명령이 IE에서 작동하도록 하려면
태그 아래에

을 넣은 다음 div에 대한 클래스를 지정합니다. 그런 다음 CSS는 다음과 같이 설계됩니다.
#container{ min-width : 600px; width:expression(document.body.clientWidth 첫 번째 최소 너비는 정상이지만 2행의 너비는 Javascript를 사용합니다. 오직 IE만이 이를 인식할 수 있으며 이는 또한 HTML 문서를 덜 형식적이게 만듭니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
7 부동 소수점 지우기

.hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시} 또는 .hackbox{clear:both;}
또는 다음을 추가합니다. after(의사 개체)는 일반적으로 콘텐츠와 함께 사용되는 개체 뒤에 발생하는 콘텐츠를 설정합니다. IE는 이 의사 개체를 지원하지 않으며 Ie가 아닌 브라우저에서는 이를 지원합니다.
따라서 IE/WIN 브라우저에는 영향을 미치지 않습니다. . 가장 문제가 되는 점은... #box:after{ content: "."; display: block; height: 0;clear: visible: hide;}

8 DIV float IE 3픽셀 버그

왼쪽 개체는 떠 있고 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다. 오른쪽 개체 내의 텍스트는 왼쪽에서 3px 간격을 갖습니다.

#box{ float :left; width:800px;}#left{ float:left width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; 이 문장이 핵심입니다}
HTML 코드

9 속성 선택기(호환되는 것으로 간주되지 않으며 버그입니다. 숨겨진 CSS)

p[id]{}div[id]{}
IE6.0 및 아래 버전에서는 숨겨져 있으며 FF 및 OPera에서 사용됩니다.
여전히 차이점이 있습니다. 속성 선택기와 하위 선택기 사이, 하위 선택기 선택기의 범위는 형식적으로 좁고, 속성 선택기의 범위는 상대적으로 넓습니다. 예를 들어 p[id]에서는 id가 있는 모든 p 태그가 동일합니다.

10 IE 숨바꼭질 문제

div 애플리케이션이 복잡하고 각 열에 일부 링크가 있는 경우 DIV에서 숨바꼭질 문제가 쉽게 발생합니다.
일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다.
해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하세요. 페이지 구조를 최대한 단순하게 유지하세요.

11 높이 비적응

높이 비적응은 내부 레이어 객체의 높이가 변경될 때 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다. 특히 내부 레이어 객체의 경우
마진 또는 패딘 시간을 사용합니다.
예:

p 개체의 콘텐츠

CSS: #box {Background-color:#eee;}
# box p {margin-top: 20px; margin-bottom: 20px; text-align:center; }
해결 방법: P 개체 CSS 코드 위와 아래에 2개의 빈 div 개체를 추가하세요. Hidden;} 또는 DIV에 테두리 속성을 추가하세요.