关于浏览器的兼容性问题和css hsck

五大主流浏览器包括：

chorme (webkit)

safari  (webkit)

IE (Trident)

firefox(Gecko)

Orpera(Presto)，现在opera内核已经改啦，基于webkit。

既然浏览器不同，那么当然去渲染效果就不一样了，也就出现了我们最头疼的问题--web应用的兼容性问题。这里最烦人的就是IE啦，也就是我们经常开玩笑的说只有有兼容性问题就说是IE6/7/8，当然各种浏览器模式下都有自己的弊端，对于IE的处理我们一般通过css hack(盒模型)来处理，也就是在写样式的时候差别对待，通过给样式加“+”、“-”、“\\”、“*”等符号标示来分别处理不同浏览器的样式。

1、png24位的图片在IE6浏览器上出现背景，解决方案是做成PNG8，也可以引用一段脚本来处理。

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

3、IE6双边距bug：块属性标签float后，又有横行的marign情况下，在IE6显示margin比设置的大。

4、浮动IE产生的双倍距离（IE6双倍边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或者margin-right,margin值会加倍。）

#box {float:left;width:10px;marign:0 0 0 100px;}

这种情况下IE会产生20px 的距离，解决方案是在float的标签式控制中加入_display:inline;

将其转化为行内属性（_这个符号只有IE6会识别）；

5、渐进识别对的方式，从总体中逐渐排除局部。

首先，巧妙的使用'\\9'这一标记，将IE浏览器从所有的情况中分离出来。

接着，再次使用'+'将IE6、IE7、IE8分离开来，这样IE8已经独立识别。

css

     .bb{

            background-color:red;                /*所有识别*/

           .background-color:red\9;           /*IE6、IE7、IE8识别*/

            +background-color:red;             /*IE6、IE7识别*/

            _background-color:red;             /*IE6识别*/

   }

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

      解决方法：统一通过getAttribute()获取自定义属性。

7、IE下，event对象有x,y属性，但是没有pageX,pageY属性；

      Firxfox下，event对象没有x,y属性，但是有pageX,pageY属性；

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

8、chrome中文界面下默认会将小于12px的文本强制按照12px显示;

     解决方法：可以通过加入css属性-webkit-text-size-adjust:none;

9、超链接访问过后hover样式后hover和active就不出现啦;

      解决方法：改变css属性的排列顺序：L-V-H-A

10、怪异模式问题：漏写DTD声明，Firxfox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来的不必要的麻烦，最好养成书写DTD声明的好习惯。现在可以使用【html5】(http://www.w3.org/TR/html5/single-page.html)推荐的写法：`<doctype html>`

11、上下marign重合问题

      IE和Firxfox都存在，相邻的两个div的marign-left和marign-right不会重合，但是marign-top和  margin-bottom却会发生重合。

      解决方法：养成良好的代码编写习惯：同时采用margin-top或者同时采用margin-bottom.

12/