내 가 알 고 있 는 브 라 우 저 를 호 환 하기 위 한 기술 을 정리 합 니 다.

이전의 무료 공간 은 정말 안 되 었 다. 3 일 동안 나 에 게 빈 희망 을 주 었 는 지, 아니면 진 지 를 옮 기기 로 결정 했다. 누가 나 에 게 돈 이 없 게 했 는 지, 누가 나 에 게 지식 이 부족 하 게 했 는 지, 나 는 단지... (이곳 에서 2 만 5 천 자의 호기 로 운 장 어 를 생략 했다).
전재 한 것 은 "원시" 로 정 리 된 것 이 라 고 밝 혀 주 십시오.
1. 상자 해석 기의 다른 해석.
#box{
   width:600px;        //for   ie6.0-

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

2, ie 에 css 숨 기기, 하위 선택 기 사용
html>body #box{     }

3, i 만 인식
*html #box{     }

4, i / win 에 유효 하고 i / max 에 숨 기 고 역 슬 래 쉬 를 사용 합 니 다.
/* / */
#box{ }
5. ie 에 게 스타일 을 따로 정의 하 는 데 더 자세 한 설명 을 드 립 니 다.
6. 부동 ie 가 발생 하 는 두 배 거리
#box{
   float:left;
   width:100px;
   margin:0 0 0 100px;  //      IE   200px   
   display:inline;   //     
}

여기 서 block, inline 두 가지 요 소 를 자세히 말씀 드 리 겠 습 니 다. Block 요소 의 특징 은 항상 새 줄 에서 시작 하고 높이, 너비, 줄 이 높 으 며 사 이 드 거 리 를 제어 할 수 있 습 니 다 (블록 요소).Inline 요소 의 특징 은 다른 요소 와 같은 줄 에 있 습 니 다. 제어 할 수 없습니다 (내장 요소).
#box{
   display:block; //             
   display:inline; //           
   diplay:table;   //for ff,  table   
}

7,for oprea only
@media all and (min-width:0px){/* opera */
#box{  }
}

8. IE 와 너비 와 높이 의 문제
IE 는 min - 이 정 의 를 모 르 지만 실제 적 으로 는 정상 적 인 width 와 height 를 min 이 있 는 상황 으로 여 긴 다.이렇게 하면 문제 가 커 집 니 다. 너비 와 높이 만 사용 하면 정상 적 인 브 라 우 저 에서 이 두 값 은 변 하지 않 습 니 다. min - width 와 min - height 만 사용 하면 IE 아래 에 너비 와 높이 를 설정 하지 않 은 것 과 같 습 니 다.
예 를 들 어 배경 그림 을 설정 하려 면 이 폭 이 비교적 중요 하 다.이 문 제 를 해결 하려 면 이렇게 해도 된다.
#box{
    width: 80px;
    height: 35px;
}
html>body #box{
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 35px;
}

9, 페이지 의 최소 너비
min - width 는 매우 편리 한 CSS 명령 입 니 다. 요 소 를 최소 화하 거나 특정한 너비 보다 작 게 지정 할 수 있 습 니 다. 그러면 레이아웃 이 항상 정확 하 다 는 것 을 보증 할 수 있 습 니 다.그러나 IE 는 이것 을 모 르 고 실제로 width 를 최소 너비 로 사용 합 니 다.이 명령 을 IE 에서 도 사용 할 수 있 도록 < div > 를 < body > 태그 아래 에 놓 고 div 에 클래스 를 지정 할 수 있 습 니 다.
그리고 CSS 는 이렇게 디자인 합 니 다.

  
  
  
  

첫 번 째 min - width 는 정상 입 니 다.그러나 두 번 째 줄 의 width 는 자바 script 을 사 용 했 습 니 다. 이것 은 IE 만 알 고 있 습 니 다. 이것 은 HTML 문 서 를 정규 화 하지 못 하 게 할 수도 있 습 니 다.그것 은 실제로 자바 script 의 판단 을 통 해 최소 폭 을 실현 한다.
같은 방법 으로 IE 의 최대 폭 을 실현 할 수 있 습 니 다.
#container{
  min-width: 600px;
  width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

10, 부동 제거
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}

또는 가입: after (위조 대상), 대상 에 설 정 된 후 발생 하 는 내용 은 보통 content 와 함께 사용 합 니 다. IE 는 이 위조 대상 을 지원 하지 않 습 니 다. Ie 브 라 우 저가 지원 하지 않 기 때문에 IE / WIN 브 라 우 저 에 영향 을 주지 않 습 니 다.이런 게 제일 귀 찮 은...
.hackbox{
       display:table; //              
}
  
.hackbox{
        clear:both;
}

11, DIV 부동 IE 텍스트 생 성 3 픽 셀 bug
왼쪽 대상 이 움 직 이 고 오른쪽 은 외부 패 치 의 왼쪽 거 리 를 사용 하여 위 치 를 정 합 니 다. 오른쪽 대상 안의 텍스트 는 왼쪽 에서 3px 의 간격 이 있 습 니 다.
#box:after{
    content: "."; 
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
} 
#box{
    float:left;
    width:800px;
}
#left{
    float:left;
    width:50%;
}
#right{
    width:50%;
}
*html #left{
    margin-right:-3px;   //     
}

12. 속성 선택 기 (이것 은 호 환 이 라 고 할 수 없고 css 를 숨 기 는 bug 입 니 다)
   HTML  
<div id="box"> 
   <div id="left"></div>
   <div id="right"></div>
</div>

이것 은 IE 6.0 과 IE 6.0 이하 버 전에 대해 모두 숨 기 고 FF 와 OPEra 역할 을 합 니 다.
속성 선택 기와 하위 선택 기 는 차이 가 있 습 니 다. 하위 선택 기의 범 위 는 형식 적 으로 축소 되 었 습 니 다. 속성 선택 기의 범 위 는 비교적 큽 니 다. 예 를 들 어 p [id] 에서 모든 p 태그 에 id 가 있 는 것 은 같은 식 입 니 다.
p[id]{}
div[id]{}

좋은 웹페이지 즐겨찾기