浏览器兼容

day 10  9.3
一、常用浏览器
ie  火狐  谷歌  safari   Opera（欧朋）

二、浏览器大战
第一次浏览器大战发生在上个世纪90年代，微软发布了它的ie浏览器，和网景公司的Netscape Navigator浏览器大打出手。
第二次浏览器大战发生在20世纪。战争产物 internet Explorer9

三、五大浏览器内核
1）Trident（MSHTML）（ie别称：三叉戟；三叉线；三齿鱼叉）   代表： ie、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器。注意：代表作品IE，因为IE捆绑在windows中，所以占有极高的市场份额，又称IE内核或是MSHTML, 此内核只能用于window平台，且是不开源的。
2）Gecko（壁虎firefox）   代表作：Mozilla Firefox（火狐）是开源的，它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行
3）Presto  （迅速的Opera）    代表：Opera（欧朋） 世界上公认渲染速度最快的引擎。
4）webkit（safari内核，Chrome内核原型，它是苹果公司自已的内核，也是苹果的Safari浏览器使用内核）  代表：Safai、Chrome，是一个开源项目
5）Blink（不久前，由Google和O怦然Software开发的浏览器排版引擎，2013年4月发布。）

四、常见的css bug
1.图片边框问题
一张图片在a标签里面，会出现一个边框。（在ie8及以下会有边框）解决方法：在图片属性下添加border：0 none；
2.图片的间隙
在div中图片间隙bug，描述：在div中插入图片时，图片会将div下方撑大。
解决方法：1）给div设置font-size：0；
               2）把img转换成块级元素，display：block；
3.双倍浮向
当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
 解决办法：给浮动的元素添加display：inline
4.默认高度
在IE6及以下版本，部分块级元素拥有默认的高度（在16px左右）。
解决办法：设置font-size：0；
5.表单行高不一致
表单元素行高对齐方式不一致
解决方法：给表单元素添加float：left；或者设置高，再写box-sizing：border-box；
属性选择器：input【type=“text”】找到input，type为text的标签
6.按钮大小不一样
各浏览器中按钮元素大小不一致，把input的边框去掉，默认padding也要去掉。 
解决方法：input外边套一个标签，在这个标签里写按钮的样式，
7.百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
 解决办法:  给右边的浮动元素添加声明：clear:right;   清除右浮动。 
8.鼠标指针bug    
cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
解决方法： 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer
cursor:      <br>   ;
auto默认 <br>   
crosshair加号 <br>   
text文本 <br>   
wait等待 <br>   
help帮助 <br>   
progress过程 <br>   
inherit继承 <br>   
move移动 <br>   
ne-resize向上或向右移动 <br>   
pointer手形

9.透明度
兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
例：opacity:0.5;
IE浏览器兼容写法：filter:alpha(opacity=value);取值范围 0-100(整数)
10.margin塌陷
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上.
解决方法：1）给父元素添加边框
               2）给父元素添加overflow：hidden
               3）给子元素添加float：left；
11.margin合并问题
当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值；
解决方法：在两个盒子中添加一个display：inline-block