06、HTML&CSS-兼容

每天一句：永远不要梦想一步登天，不要做浮躁的人，不要觉得路途漫长。而是要编程编程再编程，完了再编程，再编程。

一、为什么会出现浏览器兼容问题？

由于各大浏览器是不同厂家开发的，所用的核心架构和代码都很难重合。这就为各种莫名其妙的bug(代码错误)提供了温床。另外各大厂商出于自身利益考虑而设置的种种技术壁垒，让CSS应用起来比想象得要麻烦，浏览器的兼容是我们必须要去克服的。

二、浏览器核心

浏览器最关键的部分就是它的渲染引擎，也即是浏览器的”内核”

三、主流浏览器市场份额

2013年(浏览器份额).png

2014年(浏览器份额).png

2015年(浏览器份额).png

2016年(浏览器份额).png

四、五大浏览器内核

• Trident (MSHTML)
• Gecko (壁虎)
• Presto (迅速的)
• Webkit (Safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果safari浏览器使用的内核)
• Blink (由Google和Opera Software开发的浏览器排版引擎)

五、五大浏览器内核作品

• Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器，代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于windows平台，且是不开源的；
• Gecko：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行；
• Webkit : 代表作品Safari、Chrome ， 是一个开源项目；
• Presto: 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎；
• Blink : 由Google和Opera Software开发的浏览器排版引擎，2013年4月发布；

六、CSS Bug、CSS Hack、filter

• CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
• CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
• Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。
• 备注: 解决CSS bug的方式一种叫CSS Hack，还有一种叫Filter;使用Hack带来的一些副作用降低了CSS代码的可读性，增加了代码的负担;

设计CSS Hack和 Filter通常有两种方法：
1> 一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
2> 另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式;

七、IE常见CSS解析Bug及Hack

1、margin无效(IE5及以下)

• 最外层IDV在IE浏览器中水平居中，设置margin: 0 auto;无效；

- hack: body中还需要添加text-align: center;

2、图片间隙

• div中的图片间隙(该bug出现在IE6以及更低版本中)，在div中插入图片时，图片会将div下方撑大3个像素;

- hack1: 将 </div>和 <img> 写在同一行;
    - hack2: 将<img>转为块元素，即是添加display: block属性;

• dt,li图片间隙(图片列表浮动时)

- hack: 将<img>转为块元素，即是添加display: block属性;

3、双倍浮向(双倍边界)

• 当IE6以及更低版本浏览器在解析浮动时，会错误的把浮向边界加倍显示；(即是有float: left; margin: 0 10px;)

- hack: 给浮动元素添加声明，display: inline;

4、默认高度(例如div)

• 在IE6以及更低版本中，部分元素拥有默认高度(低于18px高度)；

- hack1: 给元素添加声明，font-size: 0;
    - hack2: 给元素添加声明，overflow: hidden;

5、按钮元素默认大小不一

• 各浏览器中按钮元素大小不一致

- hack1: 统一大小
    - hack2: input外边套一个标签，在这个标签中写按钮的样式，把input的边框去掉; 
    - hack3: 如果这个按钮是一个图片，直接把图片作为按钮的背景图即可;

6、百分比bug

• 在IE7以及更低版本中，在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的

- hack: 给右边的浮动元素添加声明:
        clear: right; // 清除右浮动

    - 清除浮动:
      clear: right; // 清除右浮动 
      clear: left;  // 清除左浮动
      clear: both;  // 清除两边的浮动

7、透明属性

• IE浏览器写法: filter: alpha(opacity=value); (value取值范围0~100)
• 兼容其他浏览器写法: opacity: value; (value取值范围0~1)

8、按钮解析边框问题

• 对于所有浏览器都会存在，按钮解析边框的问题

> 设置一个div,一个按钮，一个文本输入框
> 三个高度宽度都一样，都将边框去掉，设置为左浮动
> 三个元素显示都是一致的
> 问题展示: 三个元素分别加上1px的边框，此时按钮显示会出现差异
原因: 
    按钮不管是否添加边框，它都是存在的，而其他元素添加边框的时，是添加在元素之外的，这也就导致其他元素都会相对应变大，而按钮却没有任何变化；
解决: 
    之后出现按钮和文本框一起出现且高度是一致时，要么按钮多2px，要么文本框少写2px；

9、列表bug(IE6以及更低版本中的浏览器中)

bug1: 当给li中的a添加float: left; li没有设置浮动属性，会出现垂直效果；
    hack: 给li设置浮动效果即可；

    bug2: 当给li中的a转为块元素，并设置固定高度时，li是有浮动的情况下，会出现垂直效果；
    hack: 给a标签添加浮动即可；

    bug3: 当给li中的a转为块元素，并设置固定高度时，且有添加浮动效果，就会出现阶梯状效果；
    hack: 给li中的添加浮动(即li和a都需要添加浮动);

    备注: 
      都不设置宽度，都通过给a设置padding将li撑开;

10、边框问题

在IE6以及更低版本浏览器中，如果想要去掉默认边框，需要将border属性值设置为0，即可以兼容多个浏览器；

bug: IE6以及更低版本浏览器中，border: none;去除不了边框；
  hack: 直接使用border: 0;