部分浏览器兼容问题

部分浏览器兼容问题

 

● 浏览器兼容问题由来
　　○ 由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的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支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

● 常见浏览器bug以及解决方法
1、 图片下方3像素
　　■ 描述：在div中插入图片时，图片会将div下方撑大三像素。
　　■ hack1:将</div>与<img>写在一行上（可以解决ie6/7）；
　　■ hack2:将<img>转为块状元素，给<img>添加声明：display:block;
　　■ hack3:给<div>加overflow：hidden；
2、 换行产生3像素
　　■ hack1:不折行将元素放在一行内显示
　　■ hack2：给元素加浮动
3、 鼠标指针bug
　　■ 描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
　　■ hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
4、 li里a加display：block；出现行高不一致；
　　■ hack1：给a加display：inline-block；
　　■ hack1：给a加display：inline;
5、 图片超链接边框（ie9以下）
　　■ hack:给img声明：border：none；
6、 超链接图片边框一半
　　■ 给<a>声明：display：inline-block;
7、表单按钮元素不对齐
　　■ hack:给表单元素加float；
　　■ hack:把图片按钮换成普通按钮；
　　■ hack:用a标签伪装按钮;
8、margin值叠加（火狐和谷歌）
　　■ hack:给子元素加float
　　■ hack:给父元素加padding或者border
9、 导航在ie7以下程阶梯状
　　■ 给li加浮动

● ie6常见兼容问题以及解决方法
1、 双倍浮向（双倍边距）
　　■ 描述：当一个元素里浮动方向与外边距方向一样时，会错误地把margin值显示为双倍
　　■ hack1:给元素添加声明：display:inline;
　　■ hack2：添加声明_margin-left:1/2;
2、 部分块元素拥有默认高度(一个字的高度)
　　■ 给元素添加声明：font-size:0;
　　■ 给元素添加声明：overflow:hidden;
3、 百分比bug
　　■ 描述：在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况
　　■ hack:给右面的浮动元素添加声明：clear:right; 
4、 ie6元素高度会被撑大
　　■ 给元素添加overflow:hidden;
5、 ie6下文字重复
　　■ 元素之间有html注释影响删了
6、 除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" />