部分浏览器兼容问题

● 浏览器兼容问题由来
  ○ 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的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" />

posted @ 2016-12-30 16:20  巷子太窄  阅读(275)  评论(0编辑  收藏  举报