html浏览器的兼容问题
一、
1、NCSA Mosaic，简称Mosaic，是互联网历史上第一个获得普遍使用和能够显示图片的网页浏览器
2、浏览器内核：渲染引擎
3、五大浏览器内核：
Trident(MSHTML,IE核心)：IE浏览器
Gecko（壁虎） ：火狐
Presto（迅速的） ：欧朋
Webkit（急速） ：谷歌、苹果
Blink（急速） ：欧朋、谷歌
1）Trident只能应用于Windows平台，且是不开源的。
2）Gecko是一套开放源代码的，以C++编写的网页排版引擎，可跨平台
3）Webkit：开源，源码结构清晰，渲染速度极快
4）Blink：由Webkit内核衍生出来，由Chromium和 Opera开发维护的新项目
5）Presto：是全世界公认的渲染速度最快的引擎，而代价是牺牲了网页的兼容性。
二、兼容（css bug、css hack、filter）
说明：
1）CSS Bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题称为css bug
2）CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示的技巧方法，它们都属于个人对css代码的非官方的修改，或非官方的补丁，有人更喜欢用Patch（补丁）来描述这种行为，但是会增加一些代码，从而增加浏览器负担。
3）Filter：表示过滤器的意思，它是一种特定的浏览器或浏览器组显示或移仓规则和声明的方法。本质上，Filter是一种用来过滤不同浏览器的Hack类型
1、IE6中常见css解析bug
1）默认高度
描述：在IE6及以下版本中，部分块元素拥有默认高度。
hack1：给元素添加声明：font-size：0；
hack2：给元素添加声明：overflow：hidden；
2）div中的图片间隙
描述：在div中插入图片时，图片会将div下方撑大3像素
hack1：将</div>与<img>写在一行
hack2：将<img>转换为块元素，给<img>添加声明：display：block；
3）表单元素行高不一致（IE，MOZ，C，O，S）
描述：表单元素行高对齐方式不一致
hack：给表单元素统一添加声明：float：left；
4）按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack：统一大小（宽高）
5）各浏览器按钮边框显示不一致
hack1：在input外边加一个标签，给标签加边框，再把input的默认边框取消掉
hack2：当背景图插入
hack3：如果当按钮有划过效果的时候，可以用a标签模拟
6）双倍浮向
当IE6及更低版本浏览器在解析浮动元素时，会错误的把浮向边，边距加倍显示；
hack：给浮动元素加声明 ：display：inline；
7）li中的图片间隙
描述：在li中插入图片时，图片会将li下方撑大3像素
hack1：将<img>转为块元素，给<img>添加声明display：block，或给li加高度。（ie7以下版本没有作用）
hack2：给<img>定义一个声明：margin-bottom：-5px （正常的浏览器会显示错误）
hack3：将<li>设置高度，给<li>添加声明overflow：hidden；（全部有效）
8）li里a加display:block;或者float:left; 会把父元素高度撑大3像素左右
hack1：display:inline-block;
hack2：display:inline;
hack3：margin-bottom:-5px;不准确
hack4：给li添加float：left；并且定义li宽度
9）鼠标形状cursor属性
属性值：auto 默认 crosshair 加号 text 文本 wait 等待 help 帮助 progress 过程 inherit 继承 move 移动 ne-resize 向上或向右移动 pointer 手型
hand 手型
描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6以上版本及其它内核浏览器都识别
hack：如统一某元素鼠标指针形状为手型，应添加声明：cursor：pointer；
10）当元素类型为inline-block时，且添加text-indent：-9999px时，IE6下的元素内容也会被隐藏
hack：给该元素转换类型为block；
2、过滤器
1）_下划线属性过滤器
当一个属性前面增加了一个下划线后吗，由于符合标准的浏览器不能识别，带有下划线的属性而忽略了这个声明，但是在IE6以下版本浏览器中会继续解析这个规则
语法：选择器{_属性：属性值；}
2）“*”，“+”过滤器
过滤IE7及以下浏览器
语法：选择器{*属性：属性值；}
扩展
3）IE8及以上浏览器的兼容符号 \0，用这个符号来进行HACK技术
语法：选择器{属性：属性值\0 ；}
\9 兼容IE浏览器
语法：选择器{属性：属性值\9 ；}
4）！important关键字过滤器
它表示所附加的声明具有最高优先级的意思，但由于IE6及更低版本不能识别它，我们可以利用IE6这个bug作为过滤器来兼容IE6和其它标准浏览器；
语法：选择器{属性：属性值！important；}
注：同时设两个高度，优先级声明的属性要放到前面。
5）
-moz- 火狐
-webkit- 苹果，谷歌
-o- 欧朋
3、FF及其它浏览器兼容问题
1）如果在设置里面元素的margin-top值时，并且里面的元素没有浮动，会和父元素一起掉下来
hack1：子元素添加浮动，如果里面的元素有浮动，就可以直接设置margin-top值
hack2：需要给他的父元素加overflow：hidden；
hack3：当父元素有边框的时候，也可以直接给子元素添加margin-top值
2）透明属性兼容
兼容火狐及其它浏览器写法：opacity：0.5；（value的取值范围0-1）
兼容IE9以下浏览器写法：filter：alpha（opacity=50）；（value的取值0-100）
