1. CSS HACK
다음 두 가지 방법으로 오늘날 거의 모든 HACK을 해결할 수 있습니다.
1. !important
IE7의 !important 지원으로 인해 !important 방법은 이제 IE6의 HACK에만 사용됩니다. (작성에 주의하세요. 선언 위치가 필요하다는 점을 기억하세요. 미리 알아 두세요.)
2. FireFox용 IE6/IE77
*+html 및 *html은 지원되지 않는 IE 전용 태그입니다. 아직은 Firefox에서 제공되지 않습니다. 그리고 *+html IE7용 고유 태그입니다.
참고:
*+html IE7용 HACK은 HTML 상단에 다음 명령문이 있는지 확인해야 합니다.
http://www.w3.org/TR/html4/loose.dtd ">
2. 범용 플로트 클로저.
클리어 플로트의 원리는 [구조적 마크업 없이 플로트를 지우는 방법]을 참고하세요.
다음 코드를 추가하세요. 전역 CSS를 닫고 닫아야 하는 div에 class="clearfix"를 추가하세요.
3. 기타 호환성 팁
1. FF 아래의 div에 패딩을 설정하면 너비와 높이가 증가하지만 IE는 그렇지 않습니다. (!important로 해결 가능)
2. 센터링 문제
1). line- 높이는 현재 div와 동일한 높이로 설정되고, Vertical-align: middle. (콘텐츠를 감싸지 않도록 주의하세요.)
2) margin: 0 auto; 전능하지 않음)
3. a 태그에 내용을 추가해야 하는 경우 상위 스타일의 경우 display: block; 으로 설정해야 함(내비게이션 태그에서 공통)
4. FF와 IE의 BOX에 대한 이해 차이로 인해 2px IE에서 부동 소수점으로 설정된 div의 여백 등의 문제
5. ul 태그는 FF에 기본적으로 목록 스타일과 패딩이 있으므로 불필요한 문제를 피하기 위해 미리 선언하는 것이 가장 좋습니다. 탐색 태그 및 콘텐츠 목록에서 공통)
6. div의 높이를 외부 래퍼로 설정하지 마십시오. 오버플로: 숨김을 추가하는 것이 가장 좋습니다. 높은 수준의 적응성을 얻으려면
: 포인터.
1. firefox ie6 및 ie7의 대부분의 CSS 스타일은
이제 !important로
해킹됩니다. ie6 및 Firefox 테스트에서는 정상적으로 표시될 수 있지만
ie7에서는 !important를 올바르게 해석할 수 있습니다. 페이지가 필요에 따라 표시되지 않게 됩니다!
"*+html"을 사용하여 IE7에 대한
좋은 해킹을 찾았습니다 . 이제 IE7에서 찾아보면 문제가 없을 것입니다.이제 다음과 같이 CSS를 작성합니다.
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999 }
그러면 Firefox에서 글꼴 색상이 #333으로 표시됩니다
.글꼴 색상은 IE6에서는 #666이고 IE7에서는 #999입니다.
2CSS 레이아웃의 센터링 문제
에 대한 주요 스타일 정의는
다음과 같습니다.body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto MARGIN-LEFT: auto }
설명:
먼저 상위 항목에 TEXT-ALIGN을 정의합니다. element: 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; //ff+ie6.0의 경우 width :500px; //ie6.0-}
4 부동으로 생성된 이중 거리 ie
#box{ float:left; margin:0 0 100px; kind 상황에 따라 IE는 200px의 거리를 생성합니다. //float 무시}
block과 inline의 두 요소에 대해 자세히 설명하겠습니다. Block 요소의 특징은 다음과 같습니다. 항상 새 줄, 높이에서 시작합니다.
, 너비, 줄 높이, 여백을 제어할 수 있습니다(블록 요소). 인라인 요소의 특성은다음
과 같습니다. 다른 요소와 동일한 라인에 위치,... 제어할 수 없음(인라인 요소);
/인라인 요소가 될 수 있습니다. 블록 요소로 시뮬레이션합니다. display:inline; //동일한 행에 정렬하는 효과를 얻습니다. diplay:table;
IE는 min-의 정의를 인식하지 못하지만 실제로는 일반 너비와 높이를 다음과 같이 처리합니다. 분 있습니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면
이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서.
예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다.
이 문제를 해결하려면다음
을 수행하세요.
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px;}
페이지 최소 너비
min-width는 레이아웃이 항상 정확하도록 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정할 수 있는 매우 편리한 CSS 명령입니다. 하지만 IE는 이를 인식하지 못하고
실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면
태그 아래에그런 다음 CSS를 다음과 같이 디자인합니다:
#container{ min-width: 600px; :expression (document.body.clientWidth < 600? "600px": "auto" );}
첫 번째 최소 너비는 정상이지만 2행의 너비는 IE에서만 인식되는 Javascript를 사용합니다. HTML 문서는 그다지 형식적이지 않습니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
다음과 같이 직접 작성할 수도 있습니다.
#컨테이너{ 최소 너비:600px *너비:600px;}
이런 식으로 최소 너비는 IE 또는 FF에 관계없이 600PX입니다.
7 부동
.hackbox{display:table; //객체를 블록 요소 수준 테이블로 표시} 또는 .hackbox{clear:both;}
를 지우거나 추가합니다. : after(의사 개체)는 일반적으로 콘텐츠와 함께 사용되는 개체 뒤에 발생하는 콘텐츠를 설정합니다. IE는 이 의사 개체를 지원하지 않으며 Ie 브라우저에서 지원하지 않으므로
IE/WIN 브라우저에 영향을 주지 않습니다. 가장 문제가 되는 점은... #box:after{ content: "."; display: block; height: 0;clear: Both; visible: hide;}
8 DIV 부동 IE 텍스트는 왼쪽의 개체입니다. 버그
의 측면은부동이고 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다.
#box{ float:left; left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px; //이 문장이 핵심입니다}
HTML 코드
9 속성 선택기(이것은 호환 가능하다고 간주할 수 없습니다. CSS를 숨기는 버그입니다)
p[id ]{}div[id]{}
이는 IE6.0용이며 IE6.0 이하 버전
에서는 FF와 OPera의 속성 선택기와 하위 선택기 사이에 여전히 차이가 있습니다.
10 IE hide-and-seek 문제
div 애플리케이션이 복잡한 경우,
p In [id]와 같이 속성 선택기의 범위가 상대적으로 넓습니다.
이때 DIV와 같은 각 열에서는 숨바꼭질 문제가 쉽게 발생합니다.
일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다.
해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하십시오. 페이지 구조를 최대한 단순하게 유지하세요.
11 높이 비적응
높이 비적응은 내부 레이어 개체의 높이가 변경될 때, 특히 내부 레이어 개체가 여백이나 패딩을 사용하는 경우 외부 레이어의 높이가 자동으로 조정될 수 없음을 의미합니다
.
예:
p 개체의 콘텐츠
CSS: #box {Background-color:#eee }
#box p {margin-top: 20px;margin - 하단: 20px; text-align:center; }
해결 방법: CSS 코드 .1{height:0px;overflow:hidden;} 위와 아래에 2개의 빈 div 개체를 추가하거나 DIV에 테두리 속성을 추가합니다.
다음 방법은 다른 각도에서 분석한 방법입니다.
웹 디자인을 좋아하는 친구들이 공유할 수 있도록 컴파일된 브라우저 BUG 처리 방법(일부):
1. 별표*
IE는 *를 인식할 수 있지만 FF와 같은 표준 브라우저는 *를 인식할 수 없습니다.
예: p { 색상:노란색; *색상:빨간색;}
비슷한 것들은
+ 더하기 기호
IE만이 설명합니다
p{색상:빨간색; +색상:파란색}
IE는 파란색으로 표시되고 FF는 빨간색으로 표시됩니다.
2.!중요
IE6 이하에서는 이 스타일을 무시하고 IE7 FF에서는 이를 지원합니다.
p{색상:빨간색 !중요;색상:노란색;}
IE7 FF는 빨간색 IE6 노란색을 표시합니다.
여기서 !important 메소드는 위의 형식을 따른 후에만 IE6 이하에서 무시됩니다. 스타일 가중치를 늘리는 다른 방법은 보편적으로 사용될 수 있습니다.
3. 밑줄을 긋습니다.
IE6 이하 버전에서는 이 스타일을 사용하고 다른 버전은 무시됩니다.
p{색상:빨간색;
4. 참고 사항:
p{색상:빨간색};
이 스타일은 IE6에서는 적용 및 표시가 가능하지만, IE5 이하 버전에서는 처리되지 않으므로 IE5/6에서는 구분이 가능합니다.
5. @가져오기:
@IMPORT의 URL을 사용하여 스타일을 가져옵니다. 표준 사용법은 다음과 같이 URL에 값을 따옴표로 묶는 것입니다. @IMPORT URL("newstyle.css") 이 사용법은 IE5 이상 브라우저와 FF에서 지원됩니다. 달성 IE4의 스타일은 별도로 처리됩니다.
또한 다른 방법도 있습니다.
@IMPORT URL("noie.css") 화면;
Screen은 장치 종류를 지정하는 옵션으로, screen은 화면 표시, print는 인쇄 장치 표시에 사용됩니다. 그러나 IE에서는 이 방법을 지원하지 않으며 모든 IE 브라우저에서는 IE와 FF를 구분할 수 있습니다.
6. 속성 선택기: 특정 속성을 가진 개체를 선택하는 데 사용됩니다.
범위[클래스=왼쪽]{색상:파란색}
범위[제목]{색상:빨간색;}
IE6에서는 지원하지 않지만 FF에서는 잘 동작하기 때문에 IE와 FF를 별도로 처리할 수 있습니다.
실제 개발에서는 IE와 FF를 별도로 처리해야 하는 경우가 많습니다. 다음 코드를 사용할 수 있습니다.
#콘텐츠{
색상: 빨간색;
}
[xmlnx] #콘텐츠{
색상: 파란색
}
이 방법은 매우 실용적이고 자주 사용되는 것으로 생각됩니다. 더 자세한 설명이 필요하면 다시 게시하겠습니다.
7. 하위 개체 선택기:
범위>p{색상:빨간색}
IE6도 지원하지 않으며 IE와 FF를 구별하는 데에도 사용할 수 있습니다.
8. 탄텍 방식
#콘텐츠{
색상: 파란색;
음성 계열:""}"";
음성군:상속;
색상: 빨간색;
}
위 코드에서 voice-family를 사용하면 IE5.5 이하 브라우저에서는 color:red가 구문 분석되지 않으므로 IE6/7/FF 및 IE5.5 이하에서는 텍스트 색상이 빨간색으로 표시됩니다. 브라우저에 파란색으로 표시됩니다.
또한 음성군을 처리하는 또 다른 방법이 있습니다.
#콘텐츠{
색상: 빨간색;
음성 계열:"}"
보이스 패밀리:상속;
색상: 파란색;
}
이 방법을 사용하면 IE6 이하 브라우저와 FF 브라우저의 텍스트는 빨간색으로 표시되고 IE5 이하 브라우저의 텍스트는 파란색으로 표시됩니다!
9. 이스케이프 속성
p{width:200px;}
IE5.5 이하는 무시됩니다. 참고: 백슬래시 문자는 0-9 또는 af 앞에 나타날 수 없습니다.
10. IE의 조건부 주석 1. 조건부 주석 소개
IE의 조건부 주석은 IE 버전과 IE 버전, 비IE 버전을 구별하는 능력이 탁월하며 WEB 디자인에서 흔히 사용됩니다.
해킹 방법.
조건부 주석은 IE5 이상에서만 사용할 수 있습니다.
여러 IE가 설치되어 있는 경우 조건부 설명은 IE의 가장 높은 버전을 기반으로 합니다.
조건부 주석의 기본 구조는 HTML 주석()과 동일합니다. 따라서 IE 이외의 브라우저에서는 이를 일반 주석으로 처리하고 완전히 무시합니다.
IE는 if 조건을 사용하여 일반 페이지 콘텐츠처럼 조건부 주석의 콘텐츠를 구문 분석할지 여부를 결정합니다.
2. 조건부 주석 속성
gt: 보다 큼, 조건부 버전 이상 선택, 조건부 버전 제외
lt: 미만, 조건부 버전을 제외하고 조건부 버전 아래 버전을 선택합니다.
gte: 크거나 같음, 조건부 버전을 포함하여 조건부 버전 이상을 선택합니다.
lte: 작거나 같음, 조건부 버전을 포함하여 조건부 버전 아래 버전을 선택합니다.
! : 높낮이 상관없이 조건부 버전을 제외한 모든 버전 선택, 조건부 주석 사용 방법
코드의 <>를 해당하는 영어의 보다 큼 또는 보다 작은 기호로 바꾸십시오.
다음 코드는 IE가 아닌 브라우저에서 실행되는 조건부 주석입니다.
Internet Explorer를 사용하고 있지 않습니다.
Internet Explorer 버전 6 또는 IE가 아닌 브라우저를 사용하고 있습니다.