브라우저 호환성 문제에 대해 토론하고 일반적인 CSS 버그에 대해 이야기합니다(요약).

이 장에서는 브라우저 호환성 문제에 대해 논의하고 일반적인 CSS 버그에 대해 이야기합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 경우 참고할 수 있습니다.

1. 일반적인 주류 브라우저

1. Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Maxthon

2 최초의 브라우저:

모자이크/넷스케이프 내비게이터(1994-2008) NN

로 축약됨 2. 5개의 주요 브라우저 코어

Trident(MSHTML)(Trident; Trident line; Trident harpoon)

Gecko( Gecko)
Presto(rapid)
Webkit(Safari 커널, Chrome 커널 프로토타입, Apple 자체 커널이며 Apple의 Safari 브라우저에서 사용하는 커널)
Blink(Google 및 Opera Software에서 개발한 브라우저 레이아웃 엔진).

5대 브라우저 커널의 3대 대표작

*Trident: IE, Maxthon, Tencent, Theworld, 360 Browser

대표적인 것이 IE이다. IE는 윈도우에 번들로 제공되기 때문에 시장점유율이 매우 높다. IE 커널 또는 MSHTML이라고도 불리는 이 커널은 오픈소스가 아니다.

*Gecko: 대표작인 Mozilla Firefox는 오픈소스이며, 크로스 플랫폼이며 Microsoft Windows, Linux, MacOS X 등 주요 운영 체제에서 실행할 수 있다는 것이 가장 큰 장점입니다.

*Webkit: Safari와 Chrome의 대표작들은 오픈소스 프로젝트입니다.

*Presto: 대표작 Opera, Presto는 Opera Software에서 개발한 브라우저 레이아웃 엔진입니다. 또한 세계에서 가장 빠른 렌더링 엔진으로 인정받고 있습니다.

*Blink: Google과 Opera Software가 개발한 브라우저 레이아웃 엔진으로 2013년 4월에 출시되었습니다.

4. 브라우저 호환성 문제는 왜 발생하나요?

주요 주류 브라우저는 서로 다른 제조업체에서 개발하기 때문에 사용된 핵심 아키텍처와 코드는 복제가 어렵고, 이는 설명할 수 없는 온갖 종류의 버그(코드 오류)의 온상이 됩니다. 주요 제조업체들이 자신들의 이익을 고려하여 설정한 다양한 기술적 장벽과 함께 CSS의 적용은 상상보다 더 까다롭습니다. 브라우저 호환성 문제는 우리가 극복해야 할 문제입니다.

CSS 버그, CSS 해킹 및 필터

1. CSS 버그:

다양한 브라우저에서 CSS 스타일이 일관되지 않게 구문 분석되는 문제 또는 CSS 스타일이 브라우저에서 올바르게 표시되지 않는 문제를 CSS 버그라고 합니다.

2. CSS에서 Hack은 모두 CSS 코드에 대한 비공식 개인 수정 또는 비공식 패치이기 때문에 다양한 브라우저에서 CSS가 올바르게 표시되는 것과 호환되는 기술을 말합니다. 어떤 사람들은 이 동작을 설명하기 위해 패치를 사용하는 것을 선호합니다.

3. 필터:

특정 브라우저나 브라우저 그룹에 대한 규칙이나 명령문을 표시하거나 숨기는 방법인 필터를 의미합니다. 기본적으로 필터는 다양한 브라우저를 필터링하는 데 사용되는 해킹 유형입니다.

5. Hack 사용의 일부 부작용 CSS 코드의 가독성이 떨어지고 코드 부담이 늘어납니다.

CSS 해킹 및 필터를 설계하는 데는 일반적으로 두 가지 방법이 있습니다.

1) 하나는 브라우저 자체 버그를 사용하여 스타일이나 명령문을 숨기거나 표시하는 것입니다. 2) 다른 하나는 특정 규칙이나 구문에 대한 지원 부족 등 CSS에 대한 브라우저의 불완전한 지원을 활용하여 스타일을 숨기거나 표시하는 것입니다.

6. 일반적인 CSS 버그

1. 그림에 테두리가 있습니다. BUG IE에 사진이 추가되면 테두리가 나타납니다. 해킹: 테두리:0 또는 테두리:0 없음;

2. 사진 간격

DIV의 사진 간격 BUG

설명: div에 그림을 삽입하면 그림이 div 하단을 약 3픽셀만큼 확장합니다.

Hack1: 한 줄로 작성하세요.

Hack2: 블록 요소로 변환하고 다음 명령문을 추가합니다. display:block

dt, image gap in li
해킹: 블록 요소로 변환, 명령문 추가: display:block;

3. 이중 부동(이중 여백)(IE6에만 표시됨)
설명: Ie6 이하 브라우저에서 부동 요소를 구문 분석할 때 부동 여백이 잘못 두 배로 늘어납니다.

해킹: 부동 요소에 선언 추가:

4 기본 높이(IE6, IE7)
설명: IE6 이하에서는 일부 블록 요소의 기본 높이(약 16px;)가 있습니다

Hack1: 요소에 선언 추가: 글꼴 크기:0;

Hack2: 요소에 다음 명령문을 추가합니다: Overflow:hidden;

5. 양식 요소의 행 높이 정렬이 일관되지 않습니다
설명: 양식 요소의 행 높이 정렬이 일관되지 않습니다
해킹: 양식 요소에 다음 명령문을 추가하세요: float:left;

6 버튼 요소의 기본 크기가 다릅니다
. 설명: 다양한 브라우저에서 버튼 요소의 크기가 일관되지 않습니다
Hack1: 균일한 크기/(시뮬레이트하도록 표시됨)
Hack2: 입력 주위에 레이블을 배치하고 이 레이블에 버튼 스타일을 쓴 다음 입력 테두리를 제거합니다.
Hack3: 버튼이 그림인 경우 해당 그림을 버튼의 배경 이미지로 사용하세요.

7. 백분율 버그
설명: IE6 이하에서 백분율을 구문 분석할 때 반올림하여 계산되므로 50% + 50%가 100%보다 큰 상황이 발생합니다. (시스템의 영향도 받습니다)
해킹: 오른쪽 부동 요소에 명령문을 추가합니다:
clear:right 의미: 오른쪽 부동 요소를 지웁니다.
clear:left: 왼쪽 플로트 지우기
clear:both: 양쪽 플로트 지우기

8마우스 포인터 버그
설명: 커서 속성의 손 속성 값은 IE9 이하 브라우저에서만 인식됩니다. 다른 브라우저에서는 이 명령문을 인식하지 못합니다. 커서 속성의 포인터 속성 값은 IE6.0 이상 및 기타 커널 브라우저에서 인식됩니다.
해킹: 요소의 마우스 포인터 모양을 손 모양으로 통일하면
선언을 추가해야 합니다:cursor:pointer

9 Transparent attribute
다른 브라우저와 호환 가능 쓰기 방법: opacity:value; (값 범위 0-1; 예: opacity:0.5; )
IE 브라우저 작성 방법: filter:alpha(opacity=value); 값 범위 1-100(정수)

10 li 목록의 BUG
1): 상위 요소(li)에 float:left가 있으면 수직 버그가 발생합니다. 하위 요소(a)가 float를 설정하지 않습니다. 해킹: 상위 요소 li와 하위 요소 a 모두에 대해 float를 설정합니다. # 2): li를 ​​블록으로 변환할 때 높이와 부동 소수점이 설정되어 있지 않으면 사다리 표시가 나타납니다. 해킹: 동시에 부동 소수점을 li에 추가합니다. #11. 여백이 위아래로 겹침
설명: 현재 요소(상위 요소의 첫 번째 하위 요소)와 상위 요소에 부동 소수점이 설정되어 있지 않으면 margin-top을 설정한 후 margin-top이 됩니다. 실수로 상위 요소에 추가되었습니다.

으로 이동하세요. CSS 해킹:

1. 상위 요소에 Overflow:hidden;을 추가합니다(권장)
2. 상위 요소 또는 하위 요소

12에 float를 추가합니다. margin BUG
두 요소가 서로 위에 배열되면 위쪽 요소는 margin-top: 30px이고, 아래쪽 요소는 margin-top: 20px입니다. 두 요소 사이의 거리는 겹치지 않지만 더 큰 값으로 설정됩니다. #

위 내용은 브라우저 호환성 문제에 대해 토론하고 일반적인 CSS 버그에 대해 이야기합니다(요약).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!