浏览器兼容解决思路

如果你没接触过浏览器兼容问题，而你又需要去解决这些问题，此时的你没有丰富的经验，对浏览器特性也不熟悉，那这篇文章或许能帮到你。

浏览器兼容大致可以将兼容问题分为三种，样式兼容，脚本兼容，脚本操作样式兼容。

样式兼容

解决改此种问题需要的技能基础：

1、使用debug追踪样式，查看有效样式；

2、使用w3c查看样式详细信息，包括样式浏览器支持情况、属性等参数；

3、样式的优先级，这能帮助你理解那个样式是有效的，以及让那个样式变得有效；

解决思路：首先你应该熟悉上面的技能。当你遇到此类问题时，也有几种情况：

1、缺少样式限制，使用浏览器默认效果，导致不同浏览器显示结果不一致。处理：加上必要样式。

2、样式无效。处理：使用debug追踪样式检查是否被覆盖，如果没有那就要梳理一下样式是否正确，当然这一步对css不熟悉的人很难发现问题，这时就可以借助google和百度，百试百灵。

3、样式不是想要的，但不方便修改。处理：利用样式的优先级进行覆盖重写。

黑科技：

1、css hack。有时我们会遇到不同的浏览器和不同的浏览器版本需要分别设置一套不同的样式，怎样解决这个问题呢。css hack就帮我们解决了这个问题，利用特殊字符对不同浏览器和浏览器不同版本设置专属样式。

介绍两篇博客用于入门学习

http://www.cr173.com/html/17948_1.html

http://www.w3cplus.com/css/browser-hacks.html

2、div塌方，内元素没有撑开div。

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;} 

脚本兼容

需要技能：1、你需要了解DOM

　　　　　2、你需要懂得使用debug查看浏览器的DOM以及内置对象的方法和属性。

解决技巧和思路：

脚本兼容无非是使用不支持的方法，和操作dom没有的属性。

这是也可以借助debug工具，利用debug工具将不同浏览器的对象log出来后，你就可以查看它支持那些属性。可见，掌握了debug工具你就已经掌握了解决众多前端问题方法了。

脚本操作样式兼容

这类问题在自适应方面比较常见，因为js获取到的高度和宽度不一致引起自适应时出现滚动条之类的，这里涉及到浏览器的高度算法问题，网上有很多解决案例。

总结

解决兼用问题，首先你要判断属于那种类型，然后根据类型使用工具查找原因或组织语句在搜索引擎上快速查找到你需要问题。不同类型的处理，上面有所描述，但未能涵盖所有，如有更好的方式和步骤望慷慨分享。

最后励志一下：处理浏览器兼容并不是一件需要很多经验和记忆，即使你是一个小白，你都是可以解决的。