다양한 브라우저와 호환되는 기술을 구현하는 CSS 코드_경험 교환

CSS 스타일 시트를 작성할 때 브라우저 호환성 문제가 자주 발생합니다. 예를 들어, 다른 커널을 사용하는 브라우저는 동일한 디스플레이를 표시하지 않을 수 있으며, 다른 버전의 브라우저에도 상위 및 하위 호환성 문제가 있을 수 있습니다. 우리에게 문제가 됩니다. CSS 해킹 기술을 아주 잘 알고 있다면 이것은 너무 간단한 것이지만, 잘 이해하지 못하는 사람들에게는 정말 문제가 됩니다. 다음은 Zhao Lei의 공식 블로그에서 다양한 브라우저와의 호환성에 대한 팁을 소개하는 기사입니다. 하지만 브라우저 표시에 오류가 있다고 해서 브라우저 문제일 뿐이라고 생각하지 마십시오. 결국 집을 지을 때 의미 구조를 연구하는 것이 좋습니다. , 먼저 철근을 세워야 합니다.

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, 즉, CSS를 숨깁니다. 하위 선택 html>body #box{ }
3, IE만 *html #box를 인식합니다.{ }
4, ie/win에서는 유효하지만 ie/max에서는 숨겨져 있습니다. 백슬래시를 사용합니다. /* */
# box{ }
5, IE에 대한 스타일을 별도로 정의합니다.

6, 부동 IE에 의해 생성된 이중 거리 #box{ float:left width:100px; 0 0 100px ; //이 경우 IE는 200px의 거리를 생성합니다. display:inline; //float 무시}
여기서는 block과 inline의 두 요소에 대해 자세히 설명합니다. : 항상 새 줄에 있습니다. 시작, 높이, 너비, 줄 높이 및 여백은 모두 제어할 수 있습니다(블록 요소). 인라인 요소의 특성은 다음과 같습니다. 다른 요소와 같은 줄에... 제어할 수 없습니다. (인라인 요소);
#box{ display:block; //인라인 요소를 블록 요소로 시뮬레이션할 수 있습니다. display:inline; //동일한 행에 배열하는 효과를 얻습니다. //ff의 경우, 테이블 효과}

7, oprea 전용 @media all 및 (min-width:0px){/* Opera */#box{ }}
8, IE 및 너비와 높이 문제
IE는 min-의 정의를 인식하지 못하지만 실제로는 일반적인 너비와 높이를 min이 있는 것처럼 처리합니다. 이것은 큰 문제입니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서.

예를 들어 배경 이미지를 설정하려면 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요. #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px;} 🎜> 9. 페이지의 최소 너비
Min-width는 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정하여 항상 올바른 조판을 보장하는 매우 편리한 CSS 명령입니다. . 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면 태그 아래에