다양한 브라우저의 호환성 문제에 대한 자세한 설명

브라우저 호환성 문제는 브라우저마다 동일한 코드 조각에 대한 구문 분석이 다르기 때문에 페이지 표시 효과가 일관되지 않는 상황을 의미합니다. 대부분의 경우, 우리의 요구 사항은 사용자가 웹 사이트를 보거나 시스템에 로그인하기 위해 어떤 브라우저를 사용하든 통합된 디스플레이 효과가 있어야 한다는 것입니다. 따라서 브라우저 호환성 문제는 프런트엔드 개발자가 자주 접하고 해결해야 하는 문제입니다.

브라우저 호환성에 대해 알아보기 전에 프런트엔드 개발자를 두 가지 범주로 나누고 싶습니다.

첫 번째 범주:

는 디자인 도면에 따라 정확하게 개발하는 프런트엔드 개발자라고 할 수 있습니다. 1px까지 정확하게 하려면 설계 도면의 단점을 쉽게 발견할 수 있고 드물게 브라우저 호환성 문제가 발생하며 이러한 문제는 종종 브라우저 버그로 인해 발생하며 그들이 생성하는 페이지는 나중에 유지 관리하기 쉽습니다. code 재사용 문제도 거의 없고 비교적 안정적이고 신뢰할 수 있는 코드라고 할 수 있습니다.

두 번째 범주:

기본적으로 디자인 도면에 따라 개발하는 프런트엔드 개발자입니다. 간격, 줄 높이, 그림 위치 등과 같은 많은 세부 사항이 매우 다르며, 이는 종종 몇 픽셀씩 다릅니다. 특정 효과의 실현은 반복적인 디버깅을 통해서도 달성됩니다. 이 효과가 발생하는 구체적인 이유는 여전히 모호하며 전체적인 레이아웃은 매우 취약합니다. 조금만 바꾸면 엉망이 됩니다. 코드가 왜 이런 식으로 작성되었는지 모르겠습니다. 이러한 개발자는 종종 호환성 문제로 어려움을 겪습니다. 이 브라우저를 수정한 후 다른 브라우저가 엉망이 되었습니다. 계속해서 바꿔봤지만 여전히 아무것도 몰랐습니다. 실제로 그들이 직면한 대부분의 호환성 문제는 브라우저의 탓이 아니라 기술 자체의 탓이어야 합니다.

이 글은 주로 첫 번째 범주인 엄격한 개발자를 대상으로 하므로 여기서는 주로 브라우저 구문 분석 차이의 관점에서 호환성 문제를 분석합니다.

방법/단계

브라우저 호환성 문제 1: 서로 다른 브라우저에 있는 태그의 기본 외부 패치와 내부 패치가 다릅니다

문제 증상: 스타일 제어 없이 태그 몇 개만 작성하면 됩니다. 여백과 패딩 꽤 다릅니다.

발생 빈도: 100%

해결 방법: CSS *{margin:0;padding:0;}

참고: 이는 브라우저 호환성 문제를 해결하는 가장 일반적이고 쉬운 문제입니다. 거의 모든 경우에 와일드카드 문자 *가 사용됩니다. CSS 파일의 시작 부분을 수정하여 각 태그의 내부 및 외부 패치를 0으로 설정합니다.

브라우저 호환성 문제 2: 블록 속성 태그가 떠 있고 가로 여백이 발생한 후 IE6에 표시되는 여백이 설정 값보다 큽니다.

문제 증상: 스타일 컨트롤을 추가하지 않고 태그 몇 개만 작성하면 각각의 여백과 패딩은 상당히 다릅니다.

발생 빈도: 100%

해결 방법: CSS *{margin:0;padding:0;}

참고: 이는 브라우저 호환성 문제를 해결하는 가장 일반적이고 쉬운 문제입니다. 거의 모든 경우에 와일드카드 문자 *가 사용됩니다. CSS 파일의 시작 부분을 수정하여 각 태그의 내부 및 외부 패치를 0으로 설정합니다.

브라우저 호환성 문제 3: 높이 라벨을 더 작게 설정하세요(일반적으로 10px 미만). IE6, IE7, Aoyou에서 높이가 설정한 높이를 초과합니다.

문제의 증상: 이 높이입니다. IE6, 7 및 Aoyou의 라벨은 제어되지 않으며 설정한 높이를 초과합니다.

발생 빈도: 60%

해결 방법: 높이를 초과하는 라벨에 대해 오버플로를 숨기거나 줄 높이를 높이보다 낮게 설정합니다. 당신이 설정합니다.

참고: 이 상황은 일반적으로 작은 둥근 모서리 배경을 설정한 라벨에서 발생합니다. 이 문제의 원인은 IE8 이전의 브라우저가 레이블에 최소 기본 줄 높이를 제공하기 때문입니다. 라벨이 비어 있더라도 라벨 높이는 여전히 기본 줄 높이에 도달합니다.

브라우저 호환성 문제 4: 인라인 속성 태그, display:block 설정 후 부동 레이아웃 사용, 가로 여백 있음, IE6 간격 버그

문제 증상: IE6의 간격 비율이 설정된 간격을 초과합니다

발생 확률: 20%

해결 방법: 추가 디스플레이:인라인;디스플레이:테이블;

비고: 인라인 속성 태그, 너비와 높이를 설정하려면 디스플레이:블록을 설정해야 합니다.(입력 태그는 제외) 특별한). 부동 레이아웃과 가로 여백을 사용한 후 IE6에서는 블록 속성 부동 후 가로 여백 버그가 있습니다. 하지만 인라인 속성 태그 자체이기 때문에 display:inline을 추가하면 높이와 너비를 설정할 수 없습니다. 이때 display:inline 뒤에 display:talbe도 추가해야 합니다.

브라우저 호환성 문제 5: 이미지에는 기본적으로 간격이 있습니다

문제 증상: 여러 img 태그를 함께 사용하면 일부 브라우저에 기본 간격이 있고 문제에 언급된 와일드카드를 추가해도 작동하지 않습니다. .

발견 확률: 20%

해결책: img 레이아웃에 float 속성을 사용하세요

참고: img 태그는 인라인 속성 태그이므로 컨테이너 너비를 초과하지 않는 한 img 태그는 일렬로 정렬되지만 일부 브라우저에서는 img 태그 사이에 공백이 있을 수 있습니다. 이 간격을 제거하고 float를 사용하는 것이 올바른 방법입니다. (제 학생 중 한 명은 마이너스 마진을 사용하고 있습니다. 해결은 가능하지만 마이너스 마진 자체는 브라우저 호환성 문제를 쉽게 일으킬 수 있는 사용법이므로 사용을 금지합니다)

브라우저 호환성 문제 6: 라벨의 최소 높이 설정 min-height가 호환되지 않습니다

문제 증상: min-height 자체가 호환되지 않는 CSS 속성이므로 min-height 설정이 다양한 브라우저에서 잘 허용되지 않습니다. 호환 가능

발생 확률: 5%

해결 방법: 라벨의 최소 높이를 200px로 설정하려면 다음과 같이 설정해야 합니다: {min-height:200px; height:auto !important height: 200px; Overflow: visible;}

참고: B/S 시스템의 프런트엔드를 열 때 이러한 요구 사항이 필요한 상황이 많이 있습니다. 콘텐츠가 특정 값(예: 300px)보다 작은 경우. 컨테이너의 높이는 300px입니다. 콘텐츠 높이가 이 값보다 크면 스크롤 막대가 나타나는 대신 컨테이너의 높이가 올라갑니다. 이때 우리는 이 호환성 문제에 직면하게 됩니다.

브라우저 호환성 문제 7: 투명성을 위한 호환 가능한 CSS 설정

호환 가능한 페이지를 만드는 방법은 다음과 같습니다. 작은 코드 조각(레이아웃의 한 줄 또는 블록)을 작성할 때마다 물론, 특정 수준까지 능숙하다면 그렇게 번거롭지는 않을 것입니다. 호환성 문제가 자주 발생하는 초보자에게 권장됩니다. 많은 호환성 문제는 브라우저의 태그 기본 속성에 대한 다양한 구문 분석으로 인해 발생합니다. 이러한 호환성 문제는 약간의 설정으로 쉽게 해결할 수 있습니다. 태그의 기본 속성을 잘 알고 있으면 호환성 문제가 발생하는 이유와 해결 방법을 더 잘 이해할 수 있습니다.

/* CSS 해킹*/

저는 해커를 거의 사용하지 않습니다. 어쩌면 IE와 호환되지 않는 코드를 작성하고 이를 해결하기 위해 해킹을 사용하는 것을 좋아하지 않습니다. 하지만 해커는 여전히 사용하기 매우 쉽습니다. 해커를 사용하면 브라우저를 IE6, Aoyou, 기타(IE8 chrome ff safari Opera 등)로 나눌 수 있습니다.

◆제가 IE6에서 아는 해커는 밑줄_과 별표*

◆제가 아는 해커입니다. IE7은 별표입니다 *

예를 들어 이것은 CSS 설정입니다:

height:300px; 저는 *heihgt도 알고 있으므로 IE6이 *height:200px를 읽으면 이전 충돌 설정을 덮어쓰고 높이가 200px인 것으로 생각합니다. 계속 읽으세요. IE6도 _height를 알고 있으므로 200px 높이 설정을 덮어쓰고 높이를 100px로 설정합니다.

IE7과 Aoyou도 300px 높이 설정에서 읽습니다. _height를 모르기 때문에 *height200px을 읽으면 멈춥니다. 따라서 그들은 높이를 200px로 구문 분석하고 나머지 브라우저는 첫 번째 높이인 300px만 알고 있으므로 높이를 300px로 구문 분석합니다. 우선순위와 충돌이 동일한 속성을 설정하면 이전 속성을 덮어쓰게 되므로 작성 순서가 매우 중요합니다.

위 내용은 다양한 브라우저의 호환성 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!