（一）浏览器简介
1 .浏览器：网页浏览工具，发展历史如下：
真正开启现在互联网时代的浏览器，是在1993年发布的Mosaic。
其后是Netscape Navigator（网景领航者，简称NN，持续时间为1994-2008）
2 .浏览器内核：浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的“内核”。（所谓内核，就是常驻内存、能够快速响应的那一部分核心代码，非内核代码都是要用到时再调入内存并执行的）
Trident内核（又称为MSHTML）：代表产品Internet Explorer，又称其为IE内核
Gecko内核：代表作品Mozilla Firefox
WebKit内核：主要代表作品有Safari和Google的浏览器Chrome。
Blink：由Google和Opera开发的浏览器排版引擎，2013年4月发布
3 .什么是浏览器兼容问题？
答：所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
> 浏览器兼容产生原因是什么？
a.因为不同浏览器使用内核不同
b.用户客户端的环境不同（如分辨率不同）。
> 浏览器兼容的主要表现是什么？
a.不同浏览器对同一段代码有不用的解析，造成页面显示效果不统一的情况（JS、HTML、CSS的兼容性），如border-radius这个属性低版本的IE是不支持的
b.不同的浏览器的默认值表现是由差别的，如：margin、padding两个属性在IE和FF下默认值是不同的
（二）常见问题及解决——图片
1.图片下方有空隙产生
解决办法：
a)img{display:block;}
b)父元素font-size:0;
2.在各个浏览器下img间有空隙
解决方法：
a)方法1：将代码写在一行上
b)给图片设置浮动效果
c)设置父元素font-size：0或Word-spacing：负值
3.IE6下给图片加超链接时，图片自动会加上边框（紫色两像素的边框）
解决办法：img{border:none或0}
4.给图片加超级链接，并且设置a{border:1px solid}，此时边框显示一半问题
解决办法：
a)IE6中：边框给a标签添加，并且把a标签 打成块级元素。A:hover时加边框就不会出现一半的问题了
b)其它：给图片加边框而不是给a：hover标签加边框,并且没放上去之前也要给图片加个1像素的边框。
解决办法：img{vertical-align:middle}
（三）常见问题及解决——边距
1.不同浏览器的标签默认的外补丁和内补丁不同
解决办法：*{margin:0;padding:0;}
2.两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值
3.IE6横向margin加倍（产生因素：块属性、float、有横向margin ）
解决方法：display：inline；
4.给子元素加margin-top时，浏览器中是给父元素添加了margin-top的值了
解决方法：给父元素添加padding-top或者在给子元素添加margin-top的同时给父元素添加padding-top:0.1px;
5.经典3像素bug（产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。）
解决办法：设置非浮动元素浮动。
6.高度自适应问题（最小高度）： IE6不认识min-height，IE6里的内容会自动撑开
解决办法：div { height:auto!important; height:200px; min-height:200px; }
7.a标签hover不适用于所有标签
产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
解决办法：合理用a标签嵌套其他行内标签
8.一行文本垂直居中问题
vertical-align: middle;/*不管用*/
解决办法：
height:30px;
line-height:30px;