浏览器兼容问题

浏览器兼容

base.css中内容：1.清除默认样式（不要用的*通配符）；2添加公共类.clearfix；3版心容器.container；4.img{display:block; border:0 none;}

1浏览器基本常识

1.1常用浏览器

1.Interner Explorer, Safari ,Mozilla Firefox, Google Chrome, Opera；

2.最早的浏览器：Mosaic/Netscape Navigator（网景领航者），简称NW。

1.2五大浏览器内核

1.Trident: IE、腾讯、360浏览器，此内核只能用在windows;

2.Gecko:Firefox  主要特点:可以跨平台；

3.Webkit:Safari, Chrome 主要特点：开源项目；

4.Presto:Opera 公认渲染速度最快；

5.Blink:Goole与Opera 一起开发，2013年4月发布。

1.3为何会出现浏览器兼容问题

开发者不同，核心架构和代码很难重合，厂商出于自身考虑也会有技术壁垒。

1.4 CSS Bug、CSS Hack和Filter

CSS Bug:在浏览器中解析不一致的情况，在浏览器中不能正确显示的问题。

CSS Hack:兼容CSS在不同浏览器中正确显示的技巧方法，非官方。

Filter:表示过滤器，是一种用来过滤不同浏览器的Hack类型。

2浏览器常见兼容问题

2.1图片边框问题

Bug:在超链接里添加图片，ie8以下图片存在默认的边框问题。

Hack:   添加声明border:0 none;

2.2图片间隙问题

Bug:在div中插入img，img为行内块级元素，存在默认基线对齐问题，盒子高度会比图片高大概3px。

Hack1：  添加声明 display:block;

Hack2:    div{font-size:0;}

2.3双倍浮向问题

Bug:当IE6及更低版本在解析元素浮动时，会错误地把浮向边界margin双倍显示。

Hack:  添加声明 display:inline;

2.4默认高度（IE6，IE7）

Bug:在IE6及以下版本，部分块级元素拥有默认高度（在16px左右）。

Hack1: element{font-size:0;}

Hack2:{overflow:hidden;}生成独立渲染区域

2.5 表单元素高度不一致

Hack：给表单元素添加声明 float:left/right;

2.6 按钮元素默认大小不一

Hack：在input外边套div，在这个标签里写按钮样式，把input边框去掉。

2.7百分比Bug

Bug：ie6及以下解析百分比时，会四舍五入，认为50%+50%>100%。

Hack：两个元素都添加声明 float:left; 并给第二个元素添加声明 clear:right;

2.8 列表中a标签显示Bug

Bug：在布局如导航条等ul>li>a中，我们一般让li 浮动，如果不给a添加float，会存在阶梯显示问题。

Hack：把声明display:block； 改为float:right/left;

2.9 鼠标指针bug

Bug：cursor:hand; 只有ie9以下识别。

Hack：如统一某元素鼠标指针形状为手形，添加声明 cursor:pointer;

2.10透明属性

Bug：声明opacity:0-1；IE不识别。

Filter：用声明alpha(opacity=value(1-100))代替，兼容ie。

2.11 margin塌陷（与高度塌陷区分）

Bug：当前元素（父元素里第一个子元素）与父元素没有设置任何浮动的情况下，第一个子元素设置margin-top后，会错误把margin-top加在父元素上。

Hack1：给父元素添加声明 overflow:hidden； 形成独立渲染区域。

Hack2：给父元素添加 float，不推荐，会让父元素脱离标准流。

Hack3：给父元素添加border，只有border-top存在时才有效。

Hack4：把子元素的margin-top改为父元素的padding-top。

Hack5：子元素float。

2.12 margin Bug

当两个上下排列的元素，上面的元素有声明margin-bottom:30px;  ，下面的元素有声明margin-top:20px； 他们中间的距离不会叠加，而是会被浏览器解析为其中较大的值。

3网页制作心得

1.box在布局时，顺序为从左到右，从上到下。

2.伪元素如 li::after ，不论是否display:block，都要添加声明conten:””;