浏览器兼容与图片整合

浏览器兼容与图片整合

一、浏览器兼容

为什么会出现浏览器兼容问题？
由于各大主流浏览器由不同的厂家开发，所用的核心也不同，架构代及码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

1、关于浏览器

主流浏览器： Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、360
最早的图形浏览器 : NCSA Mosaic，或简称Mosaic 在1993年所发表
Netscape Navigator(网景领航者)（1994-2008）简称NN

2、五大浏览器内核

Trident （MSHTML，IE核心） IE浏览器    （三叉戟；三叉线；三齿鱼叉）
Gecko   （壁虎）   火狐
Presto  （ 迅速的）  欧朋
Webkit  （急速）   谷歌 、苹果
Blink 	（急速）    欧朋、谷歌

浏览器内核介绍
1、Trident核心，代表产品Internet Explorer 简称IE
使用Trident引擎的浏览器有很多，比如Maxthon遨游、Theworld世界之窗、腾讯TT、360浏览器等等，但Trident只能应用于Windows平台，且是不开源的。

2、Gecko核心，代表作品Mozilla Firefox 火狐浏览器
Gecko是一套开放源代码的、是以C++编写的网页排版引擎。
它的最大优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运行，而且它提供了一个丰富的程序界面以供互联网相关的应用程式使用，例如网页浏览器、HTML编辑器、客户端/服务器等等。 Gecko是最流行的排版引擎之一，由于Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

3、WebKit核心，代表作品Safari（苹果）、Chrome（谷歌）
–webkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。主要代表作品有Safari（苹果系统自带的浏览器）和Google的浏览器Chrome（谷歌浏览器）。

4、Presto核心，代表作品Opera 欧朋浏览器
Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎，它是世界上公认的渲染速度最快的引擎。 然而代价是牺牲了网页的兼容性。

5、Blink核心，代表作 谷歌 和opera
是由 WebKit 内核衍生出来的，是由 Chromium 和opera开发维护的新项目。

3、兼容问题与常见的BUG

CSS Bug、CSS Hack和Filter

• CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
• CSS Hack: CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
• Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

（1）、IE低版本常见CSS解析Bug及hack

1)加了超链接的图片有边框BUG
	当图片加<a href=“#”></a>在IE上会出现边框
	Hack:给图片加border:0;或者border:0    none;
	
2)图片间隙
	div,dt,li等中图片间隙中的图片间隙BUG
	描述：在div中插入图片时，图片会将div下方撑大大约三像素。
	hack1:将</div>与<img>写在一行上； ie6
	hack2:将<img>转为块状元素，给<img>添加声明：display:block;
	hack3:给图片添加vertical-align:top/middle/bottom.

3)双倍浮向（双倍边距）（只有IE6出现）
	描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
	hack:给浮动元素添加声明：display:inline;

4)默认高度（IE6、IE7）
	描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
	hack1:给元素添加声明：font-size:0;
	hack2：给元素添加声明：overflow:hidden;

（2）、非IE BUG

5)表单元素行高对齐不一致
	描述：表单元素行高对齐方式不一致
	hack:给表单元素添加声明：float:left;
	hack2:给input改变垂直对齐方式 ，添加 vertical-align:top/middle/bottom.

6)按钮元素默认大小不一
	描述：各浏览器中按钮元素大小不一致
	hack1： 统一大小/（用a标记模拟）
	hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
	hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可

7)百分比bug
	描述：在IE7及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
	（也会受系统影响）
	hack: 给右面的浮动元素添加声明：clear:right;           意思：清除右浮动。
	 
8)鼠标指针bug
	描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
	
	hack: 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
	
	cursor: ;
		auto默认
		hand 手形
		crosshair加号
		text文本
		wait等待
		help帮助
		progress过程
		inherit继承
		move移动
		ne-resize向上或向右移动
		pointer手形

9)透明属性
	兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
	例：opacity:0.5;)
	IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)

10）li列表的BUG
	1）：当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug；
	Hack:给父元素li和子元素a都设置浮动；
	2）：当给li中的a转成block；并且有height,并有float的时候，li中没设置浮动会出现阶梯显示，
	hack：同时给li加float;
 
11)当li里a、span 分别添加左右浮动时，并且li设置高度后，IE7及以下浏览器会出现 li下方多出3像素左右的空隙；
	hack：给li添加float：left；和width：100%；

12）当前元素(父元素里面第一个子元素并且是块状元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上。

Css hack:
	1、给父级元素添加overflow:hidden;(推荐使用)
	2、给父元素或者子元素加浮动
	3、当父元素有边框时，可以直接给子元素添加margin-top值；
 
13）margin BUG
	当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会相加，而是会设置为较大的值；

（3）、过滤器

  1.下划线属性过滤器
	  当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
	  
	  语法：选择符{_属性：属性值；} 

  2. !important关键字过滤器

	  它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，
	我们可以利用IE6的这个Bug作为过滤器来兼容ＩＥ６和其它标准浏览器。
	
	  语法：选择符{属性：属性值!important;}
 

  3. *属性过滤器

	  当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器混略该属
	性的作用。
	
	 语法：选择符{*属性：属性值；}

  4.   \9  ：IE版本识别；其它浏览器都不识别
语法：选择符{属性：属性值\9;}

  5.   \0  :   IE8 及以上版本识别；其它浏览器都不识别
 
 小结：

	css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别
	
	浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀
	
	主流浏览器:
		谷歌  火狐 苹果 欧朋  ie
		
	浏览器前缀:
		-webkit-	谷歌浏览器
		-moz-		火狐浏览器
		-ms-		ie浏览器
		-o-			欧朋浏览器
		
	box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大小 颜色;盒子阴影

二、图片整合

又称为：（精灵图、css sprites、css精灵、雪碧图）
把网站里面的小图标有规则的整合在一起，利用 background-position 改变背景图的位置，每个图标应用。

优点:
	（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
	（2）CSS Sprites能减少图片的字节；
	（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
	（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
	
缺点:
	（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
	（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
	（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
	（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

图片整合原则

1）边切图边整合。
2）定位时避免使用bottom,right等，用具体的数值，为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。
3）将小图标预留足够的空间，因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距，以至于其它的图片可能会意外出现在本区域内。一般的情况下，会将这些小图标整合到文件的最右侧。
4）单张整合好的sprite图片在100KB以内。
5）按分类整合图片。
6）为了方便计算尺寸，一般情况会将sprites图的坐标计算成整数倍。
7）整合好的图片必须是背景透明的图片png或者gif

psd文件中切出png图步骤:
	1: 移动工具 勾上自动选择
	2: 选中指定的图片区域
	3: 背景的眼睛点暗,指定区域的图层背景将为透明
	4: 正常切图
	5: 保存时按下shift点黄选中区域
	6: 保存的格式为png-24