为什么会有兼容问题？

由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

使用Trident内核的浏览器：IE、Maxthon、TT；使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；使用Presto内核的浏览器：Opera7及以上版本；使用Webkit内核的浏览器：Safari、Chrome。
而我现在所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。

HTML对象获取问题

FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法：统一使用document.getElementById(“idName”);

如果图片加a标签在IE9-中会有边框

解决方案:

img{border:none;}

2.rgba不支持IE8
解决方案:可以用 opacity
eg:

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/

但是,需要注意的是,opacity会影响里面元素的透明度

CSS3前缀

在这里插入图片描述

@-webkit-keyframes name{
　　　　0%{动画开始的css样式;}
　　　　100%{动画结束的css样式;}
　}
-webkit-animation:name 8s infinite linear;

ul标签内外边距问题

ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距

* 浏览器默认的margin和padding不同。

解决方案是加一个全局的*{margin:0;padding:0;}来统一。

css

  .bb{
   background-color:#f1ee18;/*所有识别*/
  .background-color:#00deff\9; /*IE6、7、8识别*/
  +background-color:#a200ff;/*IE6、7识别*/
  _background-color:#1e0bd1;/*IE6识别*/ 
  }

* IE下,event对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

IE 8以下版本的浏览器中的盒模型有什么不同

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

#DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
（1）创建新节点

  createDocumentFragment()    //创建一个DOM片段

  createElement()   //创建一个具体的元素

  createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

  appendChild()

  removeChild()

  replaceChild()

  insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

  getElementsByTagName()    //通过标签名称

  getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

  getElementById()    //通过元素Id，唯一性

web兼容性