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

집

웹 프론트엔드

CSS 튜토리얼

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

PHP中文网

May 16, 2016 pm 12:07 PM

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에서 작동하도록 하려면 태그 아래에

를 넣은 다음 div에 대한 클래스를 지정하세요.

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

같은 방법을 사용하여 IE의 최대 너비를 얻을 수도 있습니다: #container{min-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth < 600? " 600px" : 문서 .body.clientWidth > 1200? "1200px" : "auto";}
10, 클리어 플로트
.hackbox{ display:table; //객체를 블록 요소 수준 테이블로 표시} 또는 .hackbox{clear:both;}
또는 객체 뒤에 발생하는 콘텐츠를 설정하려면 after(의사 객체)를 추가합니다. 일반적으로 콘텐츠와 함께 사용됩니다. IE는 이 의사 객체를 지원하지 않으며 IE 브라우저에서는 지원하지 않으므로 영향을 주지 않습니다. IE/WIN 브라우저. -------이게 제일 귀찮네요...

#box:after{ 내용: "."; 표시: 블록 높이: 0; 가시성: 모두;
11, DIV 부동 IE 텍스트로 인해 3픽셀 버그가 발생함
왼쪽 개체는 부동이며 오른쪽 개체의 텍스트는 왼쪽에서 3픽셀 떨어져 있습니다. 800px;}#left{ float:left; width :50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //이 문장이 핵심입니다.
HTML 코드

12, 속성 선택기(호환되지 않습니다. CSS를 숨기는 버그입니다.) p[id]{}div[id]{}
IE6.0 이하 버전에서는 숨겨져 있으며 FF 및 OPera에서 작동합니다.

속성 선택기와 하위 선택기에는 여전히 차이가 있습니다. 반면에 속성 선택기의 범위는 상대적으로 넓습니다. 예를 들어 p[id]에서는 모두. p 태그는 모두 동일한 스타일입니다.

위는 다양한 브라우저와 호환되는 기술을 구현하는 CSS 코드입니다. 더 많은 관련 내용을 보려면 주의하세요. PHP 중국어 웹사이트(www.php .cn)!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.