主流浏览器以及兼容问题

一、主流浏览器

浏览器可以分为两部分，外壳+内核。其中外壳的种类相对比较多，内核则比较少。

外壳：

Shell，浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。

内核：

　　浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源加以解析排版并呈现给用户

主要组件包括：

　　1. 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是所看到的除了用来显示所请求页面的主窗口之外的其他部分

　　2. 浏览器引擎 － 用来查询及操作渲染引擎的接口

　　3. 渲染引擎 － （浏览器兼容问题的原因）用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。

　　4. 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。

　　5. UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。

　　6. JS解释器 － 用来解释执行JS代码。

　　7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术。

常见浏览器渲染引擎：Trident、Gecko、Webkit、Blink

Trident内核：IE浏览器，360，猎豹，百度；

Gecko内核：火狐；

Presto内核：Opera7及以上版本（已废弃）

Webkit内核:遨游，Safari、Chrome谷歌浏览器；

Blink内核:Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器，大部分国产浏览器最新版本都采用Blink；

对浏览器兼容问题，一般分，HTML，Javascript兼容，CSS兼容。 其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是。

渲染引擎工作原理：

渲染流程可简单地理解成一个线性串联的变换过程的组合，原始输入为URL地址，最终输出为页面Bitmap，中间依次经过了Loader（加载）、Parser（解析）、Layout（布局）和Paint（绘制）模块。

<1>渲染引擎先解析 HTML，将标签转换成树的节点——叫作"DOM树"。然后解析CSS样式数据，包括外联样式和内联样式。样式信息和 HTML 中的可视指令一起用于创建另一棵树——渲染树（此时只是html元素与自身css的组合，即先把元素样子做好了，还没有放到指定位置）。渲染树包含具有可视属性（如颜色和尺寸）的矩形。矩形按正确的顺序显示在屏幕上。

<2>渲染树构建完成后，就进入"Layout布局/回流"流程（此时网页整体显示效果已经在引擎内部有了但是还没有放到界面上）。也就是给每个节点分配正确的坐标——节点应该显示在屏幕上的哪个位置。

<3>下一步就是重绘Paint——将遍历渲染树，通过用户界面（UI）后端层绘制每个节点。Paint模块负责将Render树映射成可视的图形，它会遍历Render树调用每个Render节点的绘制方法将其内容显示在一块画布或者位图上，并最终呈现在浏览器应用窗口中成为用户看到的实际页面。

重要的是要理解这是一个循序渐进的过程。为了更好的用户体验，渲染引擎将尽可能快地在屏幕上呈现内容。它不会等到所有的 HTML 都解析完成才开始构建和布局渲染树。当程序还在持续处理来自网络层的内容时，它已经解析和呈现了部分内容。

二、常见问题

CSS兼容问题：

1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同       
 IE的条件注释hack：       
 <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          
 <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍       
 解决办法：display:block;

3.IE6下图片的下方有空隙      
 解决方法：给img设置display:block;

4.IE6下两个float之间会有个3px的bug       
 解决办法：给右边的元素也设置float:left;

5.IE6下没有min-width的概念，其默认的width就是min-width

6.IE6下在使用margin:0 auto;无法使其居中       
 解决办法：为其父容器设置text-align:center;

7.被点击过后的超链接不再具有hover和active属性       
 解决办法:按lvha的顺序书写css样式，
 ":link": a标签还未被访问的状态；
 ":visited": a标签已被访问过的状态；
 ":hover": 鼠标悬停在a标签上的状态；
 ":active": a标签被鼠标按着时的状态；

8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序

9.IE6下无法设置1px的行高，原因是由其默认行高引起的       
 解决办法：为期设置overflow:hidden;或者line-height:1px;

10.随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：css里 *{margin:0;padding:0;}

 JQurey版本支持问题： jQuery 2版本以上是不支持 IE6，7，8 浏览器

使用的是 IE6，7，8 浏览器的话，你就得选择使用jQuery1.9版本的，或者，你也可以通过条件注释在使用 IE6，7，8 浏览器的时候只允许包含 jQuery 1.9.

条件注释代码如下：

<!--[if lte IE 8]> IE8以及IE8以下版本可识别
    <script src="jquery-1.9.0.js"></script> 
<![endif]--> 
<!--[if gte IE 9]> IE9以及IE9以上版本可识别
    <script src="jquery-2.0.0.js"></script> 
<![endif]-->