브라우저 커널 및 브라우저 호환성 문제 분석-HTML 튜토리얼-php.cn

브라우저 커널 및 브라우저 호환성 문제 분석

不言

풀어 주다： 2018-08-15 14:17:06

원래의

1646명이 탐색했습니다.

이 기사의 내용은 브라우저 커널 및 브라우저 호환성 문제에 대한 내용입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

1. 브라우저 커널

중국어로 번역된 렌더링 엔진은 조판 엔진, 해석 엔진, 렌더링 엔진 등 많은 이름을 가지고 있습니다. 웹 페이지 콘텐츠를 렌더링하고 웹 페이지 콘텐츠와 레이아웃 코드를 시각적 페이지로 변환하는 데 사용됩니다. 브라우저에는 둘 이상의 코어가 있을 수 있습니다.

1. 조판 엔진

(1) Trident (Windows) 360 IE
(2) Gecko (크로스 플랫폼) Mozilla Firefox, Mozilla SeaMonkey
(3) KHTML (Linux) Konqueror
(4) WebKit (크로스 플랫폼) ) Apple Safari, Symbian 시스템 브라우저
(5) Chromium(크로스 플랫폼) Chromium, Google Chrome, SRWare Iron, Comodo Dragon
(6) Presto(크로스 플랫폼) Opera

... SafariSogou, Aoyou, QQ browser

2. JavaScript 엔진

(1) Chakra
Chakra, IE9에서 지원되는 새로운 JavaScript 엔진.
(2)SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey는 Mozilla Firefox 1.0-3.0에서 사용되고, TraceMonkey는 Mozilla Firefox 3.5-3.6에서 사용되고, JaegerMonkey는 Mozilla Firefox 4.0 및 후속 버전에서 사용됩니다.
(3)V8
Chrome 및 Maxthon 3에 적용됩니다.
(4) Nitro
Safari 4 및 후속 버전에 적용됩니다.
(5) Linear A/Linear B/Futhark/Carakan
Linear A는 Opera 4.0~6.1 버전에서 사용되고, Linear B는 Opera 7.0~9.2 버전에서 사용되고, Futhark는 Opera 9.5~10.2 버전에서 사용되고, Carakan은 사용됩니다. Opera 10.5 및 후속 버전 버전.
(6)KJS
KHTML에 대응하는 JavaScript 엔진.

3. 단일 및 듀얼 코어 엔진

(1) Trident/Gecko 듀얼 코어 브라우저
(2) Trident/WebKit 듀얼 코어 브라우저
현재 중국의 가장 주류인 "듀얼 코어" 브라우저는 기본적으로 이 아키텍처를 가지고 있습니다. , 360 익스트림 브라우저, 세계의 창 브라우저 익스프레스 에디션, Maxthon 3 Sogou 브라우저 3, QQ 브라우저, Maple 브라우저, Kuai Kuai 브라우저, Baidu 브라우저, Ayun 브라우저(최신 버전), Sunflower 브라우저, 그중 가장 기괴한 것이 Maxthon 3입니다. . 다른 듀얼코어 브라우저는 Chromium을 기반으로 하고, Maxthon은 WebKit을 기반으로 하지만 우연히 V8 엔진을 사용하게 됩니다.
(3) Trident/Gecko/WebKit 3코어 브라우저
현재 사용 가능한 것은 일본의 Lunascape여야 합니다. Avant도 WebKit 코어를 추가하면 여기에 분류됩니다. 솔직히 Lunascape는 사용하기가 정말 어렵고 정말 이상합니다. 각 코어는 상대적으로 독립적이고 쉘 자체가 충분히 강하지 않으며 안정성도 높지 않으므로 단일 코어 브라우저를 사용하는 것이 좋습니다.

2. 호환성 문제

브라우저 호환성 문제는 일반적으로 HTML, Javascript 호환성, CSS 호환성으로 구분됩니다. 그 중에서도 HTML 관련 문제는 다루기가 더 쉽다는 점은 단순히 상위 버전 브라우저에서는 하위 버전 브라우저가 인식할 수 없는 요소를 사용하고 있어 파싱이 불가능하다는 점이다. 특히 HTML5에는 새로운 태그가 많이 추가되었으며, 하위 버전의 브라우저는 시대의 흐름에 약간의 영향을 미칩니다

1. CSS 호환성

(1) 여백과 패딩의 기본 설정에 큰 차이가 있습니다. 다른 브라우저에서는 *{margin:0px;padding :0px;}
(2) ie6, 7 및 Ayouli에서 이 라벨의 높이는 제어되지 않으며 이 라벨에 Overflow:hidden을 추가합니다. (3) 그림에는 기본적으로 간격이 있습니다. float를 사용하세요
(4) 상자가 축소되고 상위 요소가 추가되어(overflow:hidden;) BFC 요소가 됩니다
(5) 글꼴 크기가 브라우저마다 일치하지 않습니다. 높이를 지정하려면 line-height:14px를 사용하세요
(6) IE6은 png 투명 효과를 지원하지 않습니다
(7) CSS Hack 호환성 속성 설정

2, html 호환성

HTML 기사

(1) 스타일 호환성 문제

(2) Weird modeWeird 모드는 다음과 같은 호환성 모드입니다. 너비에는 contentWidth, 왼쪽 및 오른쪽 패딩, 왼쪽 및 오른쪽 테두리가 포함되며 전체 범위(높이와 동일)는 box-sizing: border-box; 및 글꼴 크기와 유사합니다. 테이블은 상위 요소에서 상속될 수 없습니다. 다음 상황에서는 브라우저 쿼크 모드가 실행됩니다.

DOCTYPE을 작성하지 않으면 쿼크 모드가 실행됩니다.

앞에 추가하세요. , IE6은 Quirks Mode
Add 전에 IE7은 Quirks Mode
앞에 비어 있지 않은 문자가 있으면 IE6
에서 이상한 모드가 실행됩니다. 앞에 XML이 있으면 IE7에서 이상한 모드가 실행되지 않지만 비어 있지 않은 다른 문자는 있을 수 없습니다
.compatMode 문서를 확인하면 브라우저가 어떤 모드에서 작동하는지 확인할 수 있습니다. BackCompat 값은 이상한 모드이고 CSS1Compat 값은 표준 모드입니다

(3) 디스플레이: inline-block 요소 사이에 간격이 있습니다

<!-- 以下的 li 元素是 display: inline; 类型的 -->
<!-- 这样写元素之间有间隙 -->
<ul>
  <li>apple</li>
  <li>banana</li>
  <li>pineapple</li>
  <li>peach</li>
  <li>orange</li>
</ul>
<!-- 换个写法解决问题-->
<ul>
  <li>apple</li><li>
  banana</li><li>
  pineapple</li><li>
  peach</li><li>
  orange</li>
</ul>

로그인 후 복사

(4) IE가 나타날 수 있음 문서 스타일 일시적 실패 문제

<head>
    <!-- meta部分 -->
    <title></title>
    <!-- 可能的script部分 -->
    <script type="text/javascript"></script>   <!-- 关键：添加一个空标签 -->
    <!-- link部分 -->
</head>

로그인 후 복사