IE6, IE7 및 Firefox_Experience 교환 간의 DIV 지원 차이점

firefox ie6 ie7용 CSS 스타일 1개

요즘은 대부분 해킹에 !important를 사용합니다. ie6과 firefox 테스트에서는 정상적으로 표시되지만 ie7에서는 !important를 올바르게 해석할 수 있습니다. 결과적으로 페이지가 원하는 대로 표시되지 않습니다! "*+html"을 사용하여 IE7에 대한 좋은 해킹을 찾았습니다. 이제 IE7에서 찾아보면 문제가 없을 것입니다.

이제 다음과 같이 CSS를 작성하세요.

#1 { color: #333; } /* Moz */
* html #1 { color: #666 } /* IE6; */
*+html #1 { color: #999; } /* IE7 */

그러면 글꼴 색상은 Firefox에서는 #333, IE6에서는 #666, IE7에서는 #666으로 표시됩니다. 글꼴 색상은 #999로 나타납니다.

2 CSS 레이아웃의 센터링 문제

주요 스타일 정의는 다음과 같습니다.

body {TEXT-ALIGN: center;}
# center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto;

설명:

먼저 TEXT-ALIGN을 정의합니다. 이는 상위 요소 내에 있음을 의미합니다. IE의 경우 이 설정이면 충분합니다.

그러나 Mozilla에서는 중앙에 위치할 수 없습니다. 해결책은 하위 요소 정의를 설정할 때 "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; "를 추가하는 것입니다.

이 방법을 사용하여 전체 페이지를 중앙에 맞추려면 여러 div를 순차적으로 분할할 수 있으므로 각 분할 div에 MARGIN-RIGHT: auto;MARGIN-LEFT: auto;를 정의하면 됩니다.

박스 모델에 대한 3가지 다른 해석.

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

4 부동으로 생성된 이중 거리

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

#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. :inline; //동일한 라인을 얻습니다. 배열의 효과 diplay:table


5 IE와 너비 및 높이의 문제
IE가 정의를 인식하지 못합니다. min-이지만 실제로는 일반 너비를 넣습니다. min이 있는 것처럼 높이와 높이를 사용합니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서. 예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요.

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; height: 35px;}


6 페이지의 최소 너비
min-width는 매우 편리한 CSS 명령으로 요소의 최소 너비를 지정할 수 있습니다. 특정 너비보다 작을 수 없으므로 조판이 항상 정확하다는 것을 보장할 수 있습니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면
태그 아래에
을 넣은 다음 div에 대한 클래스를 지정합니다.

그런 다음 CSS는 다음과 같이 설계됩니다.
#container{
min-width: 600px;
width:expression(document.body.clientWidth }
첫 번째 최소- 너비는 보통이지만 2행의 너비는 IE에서만 인식되는 Javascript를 사용하므로 HTML 문서가 덜 형식화됩니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.

7 부동 소수점 지우기

.hackbox{
  display:table
//객체를 블록 요소 수준 테이블로 표시
}

또는

.hackbox{
clear:both;
}

또는 추가: after(의사 개체) 개체 뒤에 발생하는 콘텐츠를 설정합니다. 일반적으로 콘텐츠와 함께 사용되는 IE는 이 의사 개체를 지원하지 않으며 Ie 브라우저에서도 지원되지 않으므로 IE/WIN 브라우저에는 영향을 미치지 않습니다. 이게 가장 귀찮은 일입니다

......#box:after{
content: "."
display: block
height:
clear: 둘 다;
가시성: 숨겨진;
}

8 DIV 부동 IE 텍스트는 3픽셀 버그를 생성합니다

왼쪽 개체는 부동하고 오른쪽 개체는 부동합니다. 측면은 패치의 왼쪽 여백에 위치하며 오른쪽 개체 내의 텍스트는 왼쪽에서 3px입니다.
float:left;
#left{
float:left;
width:50%;}
#right{
width:50%;
*html #left{
margin-right:- 3px;
//이 문장이 핵심입니다
}
HTML 코드

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

p[id]{}div [id]{} p[id]{}div[id]{}
IE6.0 및 IE6.0 이하 버전에서는 숨겨져 있으며 FF와 OPera는 계속 작동합니다
속성 선택자와 하위 선택자의 차이점은 형식적으로 좁고 속성 선택자의 범위가 상대적으로 크다는 것입니다. 예를 들어 p[id]에서는 id가 있는 모든 p 태그가 있습니다.


10 IE 숨바꼭질 문제


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

11 높이가 적합하지 않습니다


내부 객체의 높이가 변경될 때 높이가 적합하지 않습니다. 특히 외부 레이어의 높이가 자동으로 조정될 수 없습니다. 내부 개체는
Margin 또는 paddign을 사용합니다. 예:

 
p 개체의 콘텐츠

CSS:

#box {배경색 :#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

해결책: P 개체 위와 아래에 공백 2개를 추가하세요. div 객체의 코드: .1{height:0px;overflow:hidden;} 또는 DIV에 테두리 속성을 추가합니다.