浏览器兼容问题

● 浏览器兼容问题由来
○ 由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。
● 浏览器介绍
○ 主流浏览器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、360、傲游 
○ 浏览器历史介绍
○ 浏览器内核及代表作品
■ Trident（MSHTML）（三叉戟；三叉线；三齿鱼叉）IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
■ Gecko（壁虎）代表作品Mozilla Firefox 是开源的
■ Presto（ 迅速的）代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。
■ Webkit Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核
■ Blink 由Google和Opera Software开发的浏览器排版引擎
● css bug
○ CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
○ 
● css hack
○ CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
○ 带来的副作用：降低了CSS代码的可读性，增加了代码的负担
● css filter
○ 表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型
*设计CSS Hack和 Filter通常有两种方法
1)一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
2)另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。
● css hack
○ -和_：只有i6识别，可以针对ie6兼容问题再单独写样式 
例：div{margin-left:50px;_margin-left:25px;}
○ !important：除了ie6以外的浏览器都识别，也可以针对ie6兼容问题再单独写样式，另外优先级最高高于行内样式。例：div{color:red;color:green !important}
○ *:能被ie6以及ie7识别
● 常见浏览器bug以及解决方法
○ 图片下方3像素
■ 描述：在div中插入图片时，图片会将div下方撑大三像素。
■ hack1:将</div>与<img>写在一行上（可以解决ie6/7）；
■ hack2:将<img>转为块状元素，给<img>添加声明：display:block;
■ hack3:给<div>加overflow：hidden；
○ 换行产生3像素
■ hack1:不折行将元素放在一行内显示
■ hack2：给元素加浮动
○ 鼠标指针bug
■ 描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
■ hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
○ li里a加display：block；出现行高不一致；
■ hack1：给a加display：inline-block；
■ hack1：给a加display：inline;
○ 图片超链接边框（ie9以下）
■ hack:给img声明：border：none；
○ 超链接图片边框一半
■ 给<a>声明：display：inline-block;
○ 表单按钮元素不对齐
■ hack:给表单元素加float；
■ hack:把图片按钮换成普通按钮；
■ hack:用a标签伪装按钮;
○ margin值叠加（火狐和谷歌）
■ hack:给子元素加float
■ hack:给父元素加padding或者border
○ 导航在ie7以下程阶梯状
■ 给li加浮动
● ie6常见兼容问题以及解决方法
○ 双倍浮向（双倍边距）
■ 描述：当一个元素里浮动方向与外边距方向一样时，会错误地把margin值显示为双倍
■ hack1:给元素添加声明：display:inline;
■ hack2：添加声明_margin-left:1/2;
○ 部分块元素拥有默认高度(一个字的高度)
■ 给元素添加声明：font-size:0;
■ 给元素添加声明：overflow:hidden;
○ 百分比bug
■ 描述：在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况
■ hack:给右面的浮动元素添加声明：clear:right; 
○ ie6元素高度会被撑大
■ 给元素添加overflow:hidden;
○ ie6下文字重复
■ 元素之间有html注释影响删了
○ 除a标签以外使用伪类选择器ie6一律不认识
■ 替换成a标签
● 扩展
● 图片高级-透明图片
○ 网页上常用的图片格式（jpg,png,gif）
○ 支持透明：gif，png(png8,png24,png32)
○ 网页上的图片形式（插入图片和背景图）
○ 插入图片透明
○ 图片背景透明：
■ .gif：支持
■ .png8：支持(建议使用)
■ .png24:IE6不支持，其它内核浏览器支持（PS制作)
■ .png32：IE6不支持，其它内核浏览器支持
○ 让ie6支持png24以及32的写法
● 样式：
● <style type="text/css">
● body{background:#000;}
● .alpha{display:none;_display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="png24.png",sizingMethod="scale");width:400px;height:400px;}
.ie6hidden{_display:none;}
</style>

● 结构：
● <span class="alpha"></span>
● <img class="ie6hidden" src="png24.png" />