一、了解浏览器
主流浏览器 有五个：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核)
四大内核：Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核)
二、了解兼容问题
1、什么是兼容问题？
答：同样的代码，在不同的浏览器上显示的页面效果不一样
2、不一样的原因是什么？
答：浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。
3、为什么浏览器会存在兼容问题？
- 同一浏览器，版本越老，存在
bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。 - 不同浏览器，核心技术(内核)不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。
- 设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出。
从浏览器内核的角度来看，浏览器兼容性问题可分为以下三类：
- 渲染相关：和 样式 相关的问题，即体现在布局效果上的问题。
- 脚本相关：和 脚本 相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。
- 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。
渐进增强和优雅降级
（1）渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
（2）优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
三、JavaScript兼容
1、自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方案：统一通过 getAttribute() 获取自定义属性。
2、const 问题
问题说明：Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。
解决方案：统一使用 var 关键字来定义常量。
3、window.location.href 问题
问题说明：IE或者Firefox2.0.x下，可以使用 window.location 或 window.location.href；Firefox1.5.x下，只能使用 window.location。
解决方案：使用 window.location 来代替 window.location.href 。当然也可以考虑使用 location.replace()方法。
4、innerText 的问题.
问题说明：innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行。
解决方案：在非IE浏览器中使用 textContent 代替 innerText。
示例：
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById("element").innerText = "my text";
} else {
document.getElementById("element").textContent = "my text";
}
复制代码
[注] innerHTML 同时被IE、FireFox等浏览器支持，其他的，如 outerHTML 等只被IE支持，最好不用。
5、对象宽高赋值问题
问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方案：统一使用obj.style.height = imgObj.height + "px";
6、setAttribute("style", "color: red;")
FireFox支持(除了IE，现在所有浏览器都支持)，IE不支持
解决方案：不用 setAttribute("style", "color : red;")
而用 object.style.cssText = "color: red;"(这写法也有例外)
最好的办法是上面种方法都用上，万无一失
7、类名设置 setAttribute("class", "styleClass")
FireFox支持，IE不支持(指定属性名为 class，IE不会设置元素的 class 属性，相反只使用 setAttribute 时IE自动识 classname 属性)
解决方案：
setAttribute("class", "styleClass")
setAttribute("className", "styleClass")
或者直接 object.className= "styleClass";
IE和FF都支持 object.className。
四、CSS兼容
1、CSS Hack
使用 hacker 可以把浏览器分为3类：IE6；IE7和遨游；其他（IE8 Chrome ff Safari opera等）
（1）IE6认识的 hacker 是 下划线 _ 和星号 *
（2）IE7和遨游认识的 hacker 是 星号 *
如： height:300px;*height:200px;_height:100px;
（1）IE6浏览器在读到 height:300px 的时候会认为高时 300px
继续往下读，他也认识 *heihgt ， 所以当IE6读到 *height:200px 的时候会覆盖掉前一条的相冲突设置，认为高度是 200px 。
继续往下读，IE6还认识 _height ,所以他又会覆盖掉 200px 高的设置，把高度设置为 100px 。
（2）IE7和遨游也是一样的从高度 300px 的设置往下读。当它们读到 *height:200px 的时候就停下了，因为它们不认识 _height 。
所以它们会把高度解析为 200px ，剩下的浏览器只认识第一个 height:300px ;
所以他们会把高度解析为 300px 。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
2、CSS 样式兼容不同浏览器问题
所有浏览器通用： height: 100px;
IE6 专用： _height: 100px; 或者 *height: 100px;
IE7 专用： *+height: 100px;
IE7、FF 共用： height: 100px !important;
以下两种方法几乎能解决现今所有兼容：
（1） !important
随着IE7对 !important 的支持, !important 方法现在只针对IE6的兼容(注意写法，记得该声明位置需要提前)
.box {
width: 100px !important; /* IE7+FF */
width: 80px; /* IE6 */
}
复制代码
(2)IE6/IE77对FireFox <from 针对FireFox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签，FireFox 暂不支持。而 *+html 又为 IE7特有标签。
.box { width: 120px; } /* FireFox */
*html .box { width: 80px;} /* ie6 fixed */
*+html .box { width: 60px;} /* ie7 fixed, 注意顺序 */
五、其它CSS兼容
1、不同浏览器的标签默认margin 和 padding 不同
问题说明：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。
解决方案： CSS: *{margin: 0;padding:0;}
2、图片默认有间距
问题说明：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
解决方案：使用 float 属性为 img 布局
备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。
3、CSS 布局中的居中问题
问题说明： 首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。
解决办法：在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;
4、cursor 属性问题
cursor: hand; VS cursor: pointer;
问题说明：FireFox不支持 hand，但IE支持 pointer 。
解决方法：统一使用 pointer。
