说一说浏览器兼容

一、浏览器兼容

Internet Explorer (IE)

Safari (ios) ( Safari)

Mozilla Firfox (Firefox 火狐)

Google Chrome （Google）

Opera (Opera)

最早：Netscape Navigator

网景全页航者（1994-2008 “NN”）

二、五大浏览器内核代表作品

Trident:

IE Maxthan, 腾讯，360，Theworld世界之窗；IE (MSHTML) 捆绑在windows中，只应用在windows平台且不开源。

Gecko: Mozilla Firfox（火狐）开源的，优点：跨平台

Presto: Opera公认渲染速度最快的引擎

Blink: Google & Opera (Software ) 联合开发2013.4最新开发浏览器引擎版本、

webkit: Google chorme和safari

三、兼容

浏览器是由不同厂家开发的，核心代码不同。

1. CSS Bug: 解析不一致，CSS在浏览器中不能正确显示

2. CSS Hack: 补丁（亦称patch），兼容，使CSS在不同浏览器显示相同的效果。非官方的。

3. Filter：过滤器 兼容 是hack的一种类型。

四、各种bug

1.图片有边框bug（只有在a后加图片才出现）

HACK: 给 img 加 border:0 none;

直接放在base.css里，各图片底部就可以统一改为无边框。

2.图片有间隙——基线对齐方式

HACK：

1）将img转成块级 img{display:block}

2）将父元素字体大小设为0，没有字和图的基线对齐了 div{font-size:0;}

3.双倍浮向（ie6及以下）

3.给浮动元素的浮动向加margin-left/right会加倍显示bug。

HACK:

给浮动元素加｛display:block;｝

4.部分块级元素拥有默认高度（16px左右）（ie6及以下）

HACK:

1）｛font-size:0;｝

2)｛overflow:hidden;｝

5.表单元素行高不一致，基线不同（所有浏览器存在）

HACK:

1) input{float:left;}

2) input{vertical-align:middle;}

直接放在base.css

6.按钮元素默认大小不一（所有浏览器存在）

HACK：

把效果都去掉（重置）再重新加

input: {display:block; border:0 none; padding:0;}

input外套一个标签，在标签内写input样式。

7.百分比bug

浮动元素50%+50%>100%(IE6及以下)

hack:给最后一个（右边）的浮动元素加声明

都是左浮动 clear:right 清除右浮动

都是右浮动 clear:left 清除左浮动

8.鼠标指针bug（所有）

统一某元素鼠标指针形状为手型

cursor:hand;

cursor:wait;

cursor:auto默认

cursor:text

cursor:help

cursor:process

cursor:inherit

cursor:

cursor:

cursor:

cursor:

9.透明属性

盒子里的所有元素都变透明，背景和内容。

opacity:0.3;

取值（0，1）越大的数越不透明，0最透。

ie8:filter:alpha(opacity=50) 取值为0-100

opacity:0.5;

filter:alpha(opacity=50);

10.ie8及以下不区分伪类和伪元素，（统一用单冒号）

ie9以后的，单冒号是伪类，双冒号是伪元素

11.ie7及以下版本不支持子代选择器

去掉子代，重置子代的样式

12.

ie6:

ul>li { float:left｝

a { display:block; float:left; }

span { display:block; float:left; }

13.margin塌陷：第一个子元素与父元素存在上间距，那么若是给第一个子元素加margin-top，最后会渲染成父元素的margin-top

①给父元素加上边框

最后还是附上公众号二维码，有兴趣的朋友可以扫码关注