1. 박스 인터프리터의 다양한 해석 #box{
너비:600px; //ie6.0의 경우
- width:500px; //ff+ie6.0의 경우
}
#상자{
너비:600px!중요 //ff의 경우
너비:600px; //ff+ie6.0의 경우
너비 : 500px; //ie6.0의 경우-
}
2. IE에서 CSS를 숨기려면 하위 선택기
html>body #box{ }를
사용하세요.
3, IE에서만 인식
*html #상자{ }
4. ie/win에서는 유효하지만 ie/max에서는 숨겨져 있습니다. 백슬래시를 사용하세요.
5. 즉, 스타일을 별도로 정의하십시오.
6. 플로팅에 의해 생성된 이중 거리, 즉
#상자{
부동:왼쪽;
너비:100px;
margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다.
디스플레이:인라인; //수레 무시
}
여기서는 block과 inline의 두 요소에 대해 자세히 설명하겠습니다. Block 요소의 특징은 다음과 같습니다. 항상 새 줄에서 시작하고 높이, 너비, 줄 높이 및 여백을 모두 제어할 수 있습니다(블록 요소). 인라인 요소의 특징은 다음과 같습니다. 다른 요소가 같은 줄에 있고... 제어할 수 없습니다(인라인 요소).
#상자{
display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다.
display:inline; //같은 줄에 배열하는 효과를 얻습니다.
display:table; //ff의 경우 테이블 효과를 시뮬레이션합니다.
}
7, oprea 전용
@media 모두 및 (최소 너비:0px){
#상자{ }
}
8. IE와 너비 및 높이의 문제
IE는 min-의 정의를 인식하지 못하지만 실제로는 min이 있는 것처럼 일반 너비와 높이를 처리합니다. 너비와 높이만 사용하면 큰 문제가 됩니다.
이 두 값은 일반 브라우저에서는 변경되지 않습니다. min-width와 min-height만 사용하는 경우 IE에서는 너비와 높이가 전혀 설정되지 않음을 의미합니다.
예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음과 같이 할 수 있습니다:
#box{
너비: 80px;
높이: 35px;
}
html>본문 #상자{
너비: 자동;
높이: 자동;
최소 너비: 80px;
최소 높이: 35px;
}
9. 페이지의 최소 너비
min-width는 매우 편리한 CSS 명령으로, 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정하여 항상 올바른 조판을 보장할 수 있습니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령을 IE에서도 사용할 수 있게 하려면 <body> 태그 아래에 명령을 넣은 다음 div에 대한 클래스를 지정하면 됩니다. CSS는 다음과 같이 설계됩니다:
#container{
최소 너비: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
첫 번째 최소 너비는 정상이지만 두 번째 줄의 너비는 IE에서만 인식되는 Javascript를 사용하므로 HTML 문서가 덜 형식화됩니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
동일한 방법을 사용하여 IE의 최대 너비를 얻을 수도 있습니다.
#컨테이너
{
최소 너비: 600px;
최대 너비: 1200px;
너비:표현(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto";
}
10, 클리어 플로트
.해크박스{
display:table; //객체를 블록 요소 수준 테이블로 표시합니다.
}
또는
.해크박스{
지우기:둘 다;
}
또는 객체 뒤에 발생하는 콘텐츠를 설정하려면 after(의사 개체)를 추가합니다. 일반적으로 콘텐츠와 함께 사용됩니다. IE는 이 의사 개체를 지원하지 않으며 IE 브라우저에서는 지원하지 않으므로 IE/에 영향을 주지 않습니다. WIN 브라우저. -------이게 제일 귀찮네요...
#상자:이후{
콘텐츠: ".";
디스플레이: 블록;
높이: 0;
명확함: 둘 다;
가시성: 숨김;
}
11. DIV 플로팅 IE 텍스트로 인해 3픽셀 버그가 발생합니다.
왼쪽 개체는 부동되고 오른쪽 개체는 외부 패치의 왼쪽 여백을 사용하여 위치가 지정됩니다. 오른쪽 개체 내의 텍스트는 왼쪽에서 3px 간격으로 배치됩니다.
#상자{
부동:왼쪽;
너비:800px;
}
#왼쪽{
부동:왼쪽;
너비:50%;
}
#오른쪽{
너비:50%;
}
*html #왼쪽{
margin-right:-3px; //이 문장이 핵심입니다.
}
HTML 코드
12. 속성 선택기(호환되는 것으로 간주할 수 없으며 CSS를 숨기는 버그입니다)
p[ID]{}
div[id]{}는
IE6.0 및 IE6.0 미만 버전에서는 숨겨져 있습니다.
FF 및 OPera에서 사용되는 하위 선택기와 속성 선택 사이에는 여전히 차이가 있습니다. 장치의 범위는 상대적으로 넓습니다. 예를 들어 p[id]에서 id가 있는 모든 p 태그는 동일한 스타일입니다.