浏览器的兼容方法

Trident(MSHTML)(三叉戟；三叉线；三尺鱼叉；)

Gecko（壁虎）

Presto（迅速的）

Webkit（Safari内核；Chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）

Blink（由Goole和Opera Software 开发的浏览器排版引擎。）

Trient：IE、Maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器。

代表代表作品IE，因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核只能应用于widows平台，且是不开源的。

Gecko：代表作品MOzilla Firefox 是开源的，它最大的优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要系统上运行。

Webkit：代表作品Safari、Chrome、傲游浏览器3，是一个开源项目。

Presto：代表作品Opera（前内核），Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现在已经改用Goole Chrome的Blink内核。

Blink：由Goole和Opera Software开发的浏览器排版引擎，2013年4月发布。

为什么会出现浏览器兼容问题？

说白了其实就是为了利益。还有就是他们内核不同，所以克服浏览器兼容就是我们程序员必须去克服的问题。

CSS Bug：

　　css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器不能正确显示的问题成为cssbug.。

CSS Hack：CSS中，hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法因为他们都属于个人对css代码的非官方的修改，或者非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。

Filter：表示过滤器的意思，它是一种对特定的浏览器或者浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。

常见的CSSbug和CSSHack

 　　1图片间隙问题

　　　　A  div中的图片间隙（该bug出现在所有浏览器中）

　　　　　描述：在div中插入图片时，图片会将div下方撑大三像素。
　　　　　hack：将<img>转换为块元素，<img>添加声明：dispaly：block；

　　　　B当图片横着排的时候，图片和图片之间存在一定的间距（所有的行内元素和行内块元素。）　　hack1:img(float:left;)

　　　　　hack2:将<div>与<img>写在一行上；

　　　2 dt li中图片间隙

　　　　　　hack：将img转换为块元素，给<img>添加声明：display：block；

　　　3 双倍浮向 （双倍边距）（只有IE6出现）

　　　　描述：在IE6中一个居左（或居右）浮动的元素放置进一个容器盒（box），并在浮动元素上使用了左边距（或右边距）在IE6内便会产生双倍边距。

　　　　hack：给浮动元素添加声明：display：inline；

　　4图片在IE浏览器上有蓝色的边框

　　　　hack：给img的边写成0；img{border：0；}

　　5 默认高度（IE6， IE7）

　　描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）

　　hack1：给元素添加声明：font-size：0；

　　hack2:给元素添加声明：overflow：hidden；

　　6表单元素距离顶部间距不一致（IE，MOZ,C , O, S）

　　描述：表单元素距离顶部的距离不一致

　　hack：给表单元素添加声明：float：left；

　　7 按钮的默认大小不一

　　描述：各浏览器中按钮元素大小不一致

　　hack1：统一大小/（用a标记模拟）

　　hack2：input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

　　hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

　　8百分比bug

　　描述：在IE6及以下版本中在解析百分比时，会按照四舍五入的方法计算从而导致50%加50%大于100%的情况。（也会受系统影响）

　　hack：给右面的浮动元素添加声明：clear：right；

　　9鼠标指针bug

　　描述：cursor属性的hand属性值只有IE9以下浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上及其它版本内核浏览器都识别该声明。

　　hack：如统一某元素鼠标指针形状为手型，应该添加声明：cursor：pointer；

　　10子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top属性添加给父元素。

　　hack1：给父元素添加overflow：hidden声明。

　　如果子元素设置了浮动属性也不会出现这个问题。

　　11 当li里面的a转换成块元素的时候，如何想要让所有的列表都在同一行上或者呈现阶梯状显示，需要给li和a都设置浮动（float）属性，否则IE6里面会出现每个li独占一行的情况。

　　12 在IE6及更低版本的浏览器里，如果想去掉input的默认边框

　　　　需要将其border属性值设置成0才可兼容多个浏览器。

　　13input的type类型是text的时候，提示信息用value表示

　　　如何设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在IE6上是在顶部的，解决他的方法是加一个line-height 行高等于高度。

　　14.使用定位时候，如果有默认值最好添加上，如果不添加，在ie6上回显示出去。

　　15、在IE6里面要想让hover有效显示，必须添加到hover给a标签。

　　16.在使用overflow：hidden解决高度塌陷时候，有些时候在IE6上是不生效的。

　　　　解决方法{overflow;hidden;zoom1;}

　　17 在使用了浮动，padding以后，IE6上需要减去2倍的padding值，而其他浏览器不用。

　　18在谷歌上 100%显示时候，字体大小最小识别的是12px；但是IE上是准备识别的

　　以上是90%的兼容问题 涉及到IE6.0版本。

关于图片的兼容：

在IE中将一个图片添加超链接之后，就会带有一个蓝色边框，

解决的办法：可以设置border=none或者border：0；

 

png24在IE6上有兼容，有背景色。