浏览器兼容问题

1、不同的浏览器的内核不一样，所以各个浏览器对网页的解析是有一定出入的，这是导致浏览器兼容问题的主要原因

浏览器内核的理解：

主要分为两部分：渲染引擎和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（加入CSS等）、计算网页的显示方式，然后输出至显示屏或者打印机。

JS引擎：解析和执行js来实现网页的动态效果

• IE：trident内核
• Firefox : gecko内核
• Safari : webkit内核（苹果系统的Mac OS中的浏览器）
• Chrome：Blink内核（Blink内核基于webkit内核）
• Opera：Blink内核

主流浏览器内核私有属性css前缀：mozilla内核 (firefox,flock等)     -moz
                                                      webkit内核(safari,chrome等)   -webkit
                                                      opera内核(opera浏览器)         -o
                                                      trident内核(ie浏览器)               -ms

为什么要重置浏览器默认样式，如何重置（为什么要初始化CSS）

    每一种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览内置的样式表来渲染。不同浏览器甚至同一浏览器不同版本的默认样式都是不同的，这样就会出现很多的兼容问题

 

• 最简单的办法：*{margin:0;padding:0}------不推荐使用
• 使用CSSReset可以将所有浏览器的默认样式设置为一样（天猫使用）
• normalize：有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一种选择。bootstrap已经引用该css来重置浏览器的默认样式，比如比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机在内的超多浏览器。

 

 

2、对浏览器的兼容问题，一般分为HTML兼容、JS兼容、CSS兼容。

3、HTML兼容处理：无非是高浏览用了低版本浏览器无法识别的元素，导致其不能解析

    平时注意一些，特别是HTML5增加了许多新标签，低版本的浏览器可能无法识别

不同浏览器的标签默认的margin和padding不同

问题：标签不加样式，各自的margin和padding差异较大

解决：css中添加样式，*{margin:0;padding:0}

 

块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大

问题：ie6中后面的一块被顶到下一行

解决：在设置float的标签样式中添加display：inline，将其转换为行内属性

 

设置较小高度标签（一般小于10px），在ie6，ie7，遨游高出比设置的大

问题：ie6、ie7和遨游里这个标签的高度不受控制，超出自己设置的高度

解决：①给超出高度的标签设置overflow：hidden

          ②设置的行高line-height小于预计的高度

 

行内属性标签，设置display：block后采用float布局，又有横向的margin（类似第二种）

解决：在display：block后面加入display：inline；display：table

 

图片默认有间距

问题：img标签放在一起的时候，有些浏览器会有默认的间距，加上*{margin:0;padding:0}也不起作用

解决：使用float属性为img布局

 

标签min-height设置不兼容

问题：min-height不能被浏览器兼容

解决：设置一个标签的最小高度200px；这样设置：

｛

    min-height:200px;

    height:auto !important;

    height:200px;

    overflow:visible;

｝

display：inlne-block；在IE6、7不兼容

visibility的collapse属性（小本子记录）

技巧

1、使用hack（参考博客hack技术）

2、padding,margin,height,width

 

• 写好标准头， http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> http://www.w3.org/1999/xhtml”>
• 尽量使用padding，慎用margin
• div的宽尽量用margin，慎用padding
• height尽量补上100%，父级height有定值，子级则不用补100%
• 子级全为浮动时，底部补个clear:both

3、渐进识别，从总体中逐渐排除局部

①使用“\9”,IE6 IE7 IE8均能识别

②“+”        IE6 IE7识别

③“_”        IE6识别

css

.bb{

.background-color:red\9; /*IE6、7、8识别*/

+background-color:red; /*IE6、7识别*/

_background-color:red; /*IE6识别*/

}

4、如何处理HTML5的兼容性问题？

不能识别HTML新标签而不能使用，解决办法有两种：

①实现标签识别：通过document.createElement(tagName)方法即可让浏览器识别新标签

②js解决：

使用html5shim，在头部调用

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

③ webSocket如何兼容低浏览器？

使用轮询或者长连接的方式实现伪websocket的通信

5、jQuery浏览器兼容问题

jQuery可以说是支持各大主流浏览器

jQuery2.0以前还是考虑IE6 7 8的老用户，时刻兼容他们，但是随着浏览器的发展，IE6 7 8的用户越来越少，再2.0版本开始，就不在支持IE6 7 8浏览器了。

在网页制作的时候，为了达到更好的兼容，可以通过条件注释的方法，来导入jQuery

<!--[if lt IE 9]>
        <script src="js/jquery-1.10.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
        <script src="js/jquery-3.1.1.js"></script>
<!--<![endif]-->