遇到过的兼容问题以及解决方案

1、png24位图片在IE6浏览器上出现背景，解决方案：做成png8位图片。

2、浏览器默认的margin和padding不同，解决方案：加一个全局{margin：0；padding：0；}；来统一。

3、超链接访问后hover样式就不会出现了，被点击后的超链接不在具有hover和active了，解决方法：改变CSS属性的排列顺序：L-V-H-A、a:link{} a:visited{} a:hover{} a:active{}

4、IE下可以使用获取常规属性的方法来获取自定义属性，也可以用getAttribute()获取属性；     

      火狐下、只能用getAttribute()获取自定义属性；

      解决方法：统一使用getAttribute()获取自定义属性；

5、谷歌中文界面下默认会将小于12px的文本强制按照12px显示。解决方法：可以通过加入css属性 -webkit-text-size-adjust:none;解决。

6、IE下、envet对象有x,y属性，没有pageX,pageY属性；

      火狐下，   event对象有pageX，pageY属性，但没有x,y属性。

      解决方法：加条件注释，缺点是IE浏览器下可能会增加额外的HTTP请求数。 

7、IE6双倍边距BUG，块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置大，浮动IE产生双倍距离，#lizi{float:left;width:10px;margin:0 0 0 100px;}这种情况下IE会产生20px的距离，解决方案是在float的标签样式控制中加入_display:inline;将其转化为行内属性。（“_”这个符号只有在IE6会识别）

8、IE6认识的hacker 是下划线_ 和星号 *

      IE7 遨游认识的hacker是星号 *

      比如这样一个CSS设置：

height:300px;*height:200px;_height:100px; 
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；

IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。