이 장에서는 브라우저 호환성 문제에 대해 논의하고 일반적인 CSS 버그에 대해 이야기합니다. 이는 특정 참조 가치가 있으므로 도움이 필요한 경우 참고할 수 있습니다.
1. 일반적인 주류 브라우저
1.
Internet Explorer, Safari, Mozilla Firefox, Google Chrome, Opera, Baidu, 360, Sogou, Maxthon
모자이크/넷스케이프 내비게이터(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이라고도 불리는 이 커널은 오픈소스가 아니다.
4. 브라우저 호환성 문제는 왜 발생하나요?
주요 주류 브라우저는 서로 다른 제조업체에서 개발하기 때문에 사용된 핵심 아키텍처와 코드는 복제가 어렵고, 이는 설명할 수 없는 온갖 종류의 버그(코드 오류)의 온상이 됩니다. 주요 제조업체들이 자신들의 이익을 고려하여 설정한 다양한 기술적 장벽과 함께 CSS의 적용은 상상보다 더 까다롭습니다. 브라우저 호환성 문제는 우리가 극복해야 할 문제입니다. CSS 버그, CSS 해킹 및 필터1. CSS 버그:
다양한 브라우저에서 CSS 스타일이 일관되지 않게 구문 분석되는 문제 또는 CSS 스타일이 브라우저에서 올바르게 표시되지 않는 문제를 CSS 버그라고 합니다.
3. 필터:
5. Hack 사용의 일부 부작용 CSS 코드의 가독성이 떨어지고 코드 부담이 늘어납니다.
CSS 해킹 및 필터를 설계하는 데는 일반적으로 두 가지 방법이 있습니다.
1) 하나는 브라우저 자체 버그를 사용하여 스타일이나 명령문을 숨기거나 표시하는 것입니다. 2) 다른 하나는 특정 규칙이나 구문에 대한 지원 부족 등 CSS에 대한 브라우저의 불완전한 지원을 활용하여 스타일을 숨기거나 표시하는 것입니다.1. 그림에 테두리가 있습니다. BUG IE에 사진이 추가되면 테두리가 나타납니다. 해킹: 테두리:0 또는 테두리:0 없음;
2. 사진 간격
설명: div에 그림을 삽입하면 그림이 div 하단을 약 3픽셀만큼 확장합니다.
Hack1: 한 줄로 작성하세요.
Hack2: 블록 요소로 변환하고 다음 명령문을 추가합니다. display:block
dt, image gap in li
해킹: 블록 요소로 변환, 명령문 추가: display:block;
3. 이중 부동(이중 여백)(IE6에만 표시됨)
설명: Ie6 이하 브라우저에서 부동 요소를 구문 분석할 때 부동 여백이 잘못 두 배로 늘어납니다.
4 기본 높이(IE6, IE7)
설명: IE6 이하에서는 일부 블록 요소의 기본 높이(약 16px;)가 있습니다
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이 됩니다. 실수로 상위 요소에 추가되었습니다.
1. 상위 요소에 Overflow:hidden;을 추가합니다(권장)
2. 상위 요소 또는 하위 요소
12에 float를 추가합니다. margin BUG
두 요소가 서로 위에 배열되면 위쪽 요소는 margin-top: 30px이고, 아래쪽 요소는 margin-top: 20px입니다. 두 요소 사이의 거리는 겹치지 않지만 더 큰 값으로 설정됩니다. #
위 내용은 브라우저 호환성 문제에 대해 토론하고 일반적인 CSS 버그에 대해 이야기합니다(요약).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!