跨浏览器兼容我们可以利用现有的资源网站来发现现有的网站是否存在兼容性问题。在这里我推荐两个网站：这是一个比较老的兼容性

如何发现？

我们可以利用现有的资源网站来发现现有的网站是否存在兼容性问题。在这里我推荐两个网站：

这是一个比较老的兼容性资源网站，这里面列出CSS和DOM的一些比较典型的兼容性问题。

网站内含有比如对CSS、DOM、HTML5等的测试，每个模块点进去后还会进行细分。

比如我们查看CSS中的Backgrounds and borders，横向对应浏览器竖向对应我们的内容，可以清晰明确的看出在那些浏览器中支持，哪些不支持。比较常见的浏览器兼容问题都能在这里找到。

相对于第一个网站，CanlUse是一个比较新的网站，他可以直接查询内容交互性会更好一些。

比如说我们要查询border-radius在不同浏览器的支持情况，它可以比较直接以图表的形式给出浏览器兼容情况，并能显示出不同型号的浏览器在中国和全球市场中的占比份额更加有助于你进行开发。

它的另外一个功能是浏览器对比功能，我们可以勾选想要查看的浏览器，比如说IE8、IE9在CSS、JS API下的对比。

下拉后，可以看到非常详细各项对比内容。

我们依旧是先找是否有现有的资源网站可以帮助我们解决出现的兼容性问题。

这个网站提供了各种网站的Hack，可以通过直接搜索浏览器查看现有的Hack。

网址：https://github.com/styled-components/styled-components

网址：https://github.com/vercel/styled-jsx

网址：https://github.com/JedWatson/classnames

它是一种技术，有些浏览器它不支持某些特性，通过打补丁的方式使它支持这些特性。

网址：github上现有的shim有es5、es6、json等

需要注意的是shim是一个补充内容，它需要在其他内容引入之前就引入到里面。

解决： *{margin:0;padding:0;}

解决：display:inline;

解决：overflow:hidden;

解决：行转块后加display:inline;display:table;

解决：float属性布局

......