Analysis of browser kernel and browser compatibility issues

The content of this article is about the analysis of browser kernel and browser compatibility issues. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Browser kernel

Rendering Engine, translated into Chinese, has many names, such as typesetting engine, interpretation engine, and rendering engine. It is now popularly called the browser kernel. It is used to render web page content and convert the web page content and layout code into visual pages. A browser may have more than one core.

1. Typesetting engine

(1) Trident (Windows) 360 IE
(2) Gecko (cross-platform) Mozilla Firefox, Mozilla SeaMonkey
(3) KHTML (Linux ) Konqueror
(4) WebKit (cross-platform) Apple Safari, Symbian system browser
(5) Chromium (cross-platform) Chromium, Google Chrome, SRWare Iron, Comodo Dragon
(6) Presto (cross-platform) Platform) Opera

##chrome、operachromium or Blink##360、Cheetah, 2345 browserFirefox##Safari WebkitSogou, Aoyou, QQ Browsertrident webkit

2. JavaScript engine

(1) Chakra
Chakra, the new JavaScript engine enabled by IE9.
(2)SpiderMonkey/TraceMonkey/JaegerMonkey
SpiderMonkey is used in Mozilla Firefox 1.0-3.0, TraceMonkey is used in Mozilla Firefox 3.5-3.6, and JaegerMonkey is used in Mozilla Firefox 4.0 and subsequent versions.
(3)V8
Apply to Chrome and Maxthon 3.
(4)Nitro
Apply to Safari 4 and subsequent versions.
(5) Linear A/Linear B/Futhark/Carakan
Linear A is used in Opera 4.0-6.1 versions, Linear B is used in Opera 7.0~9.2 versions, Futhark is used in Opera 9.5-10.2 versions, Carakan is used in Opera 10.5 and subsequent versions.
(6)KJS
The JavaScript engine corresponding to KHTML.

3. Single and dual-core engines

(1) Trident/Gecko dual-core browser
(2) Trident/WebKit dual-core browser
Now the most mainstream "dual-core" browsing in China Most browsers have this architecture, including 360 Speed ​​Browser, World Window Browser Speed ​​Edition, Maxthon 3 Sogou Browser 3, QQ Browser, Maple Browser, Kuai Kuai Browser, Baidu Browser, Ayun Browser ( Later versions), Sunflower Browser, the most bizarre of which is Maxthon 3. Other dual-core browsers are based on Chromium, while Maxthon is based on WebKit, but it happens to use the V8 engine.
(3) Trident/Gecko/WebKit three-core browser
The one currently available should be Japan’s Lunascape. Avant will also be classified here after adding the WebKit core. To be honest, Lunascape is really difficult to use and really weird. Each core is relatively independent, the shell itself is not strong enough, and the stability is not high, so it is better to use a single-core browser.

2. Compatibility issues

Regarding browser compatibility issues, they are generally divided into HTML, Javascript compatibility, and CSS compatibility. Among them, HTML-related issues are easier to deal with. It's just that the higher version browser uses elements that the lower version browser cannot recognize, causing it to be unable to parse, so you should pay attention to it. In particular, HTML5 adds many new tags, and lower version browsers have a bit of an impact on the progress of the times.

1. CSS compatibility

(1) There is a big gap between the default settings of margin and padding in different browsers. Use *{margin:0px;padding:0px;}
(2) The height of this label in ie6, 7 and Ayouli is uncontrolled and exceeds the height set by yourself. Add overflow:hidden
to this label ( 3) The image has spacing by default, use float
(4) The box collapses, and the parent element is added (overflow: hidden;) to become a BFC element
(5) The font size is inconsistent in different browsers, use line-height :14px;Specify height
(6) IE6 does not support png transparent effect
(7) CSS Hack compatibility attribute setting

2, html compatibility

HTML article
(1) Style compatibility issue

(2) Weird mode
Weird mode is a compatibility mode that does not comply with W3C specifications. The width includes contentWidth, left and right padding, and left and right borders. The entire range within (the same goes for height), similar to box-sizing: border-box;, and the font-size of the table cannot be inherited from the parent element. The following situations will trigger the browser's Quirks Mode:

Not writing DOCTYPE triggers Quirks Mode
Add ="utf-8" ?>, IE6 will trigger Quirks Mode
Add before , IE7 will enter Quirks Mode
If there is any non-empty character before it, weird mode will be triggered under IE6
If there is XML before , it will not trigger weird mode under IE7 mode, but cannot have other non-empty characters
Check document.compatMode to see which mode the browser is working in: the value BackCompat is the weird mode, the value CSS1Compat is the standard mode

(3) display :inline-block There is a gap between elements

<!-- 以下的 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 may have a temporary failure of document style

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

Related recommendations:

Browser kernel information sorting

Browser kernel URL decomposition web server

js judge browsing Method of browser version and browser kernel_javascript skills

Browser	Kernel
IE, Baidu, World Window	Trident
IE chromium
Gecko

The above is the detailed content of Analysis of browser kernel and browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!