一个 bug 严重困扰小白，我是怎么解决它的
作为前端开发者，我们时常会遇到各种各样的 bug，其中有些是非常难以解决的，甚至可能困扰我们很长一段时间。在我刚开始接触前端开发的时候，我也遇到了一个非常棘手的 bug，让我十分苦恼。下面我会详细地讲述这个 bug 的来龙去脉以及我是怎么解决它的。
问题描述
当时我正在开发一个网页，其中有一个功能是在页面中显示一个动画效果，这个效果的具体实现是通过 CSS 的 animation 属性来完成的。我写好了对应的 CSS 和 HTML，但是一运行页面，发现这个动画效果根本没有生效，而且控制台也没有报错。
这个问题让我十分困惑，前后调试了很久也没有找到问题所在。后来我问了同事，他告诉我这个问题可能是因为浏览器的兼容性问题导致的。
解决过程
我按照同事的建议将代码放到了不同的浏览器中测试，结果发现在 Chrome 和 Firefox 中这个动画效果是可以正常展示的，但是在 Safari 和 IE 中却无法正常工作。这个结果说明了我的同事是对的，问题确实是浏览器兼容性导致的。
接下来我就开始尝试解决这个问题。首先我通过 Google 搜索找到了一些关于 animation 属性在不同浏览器中的兼容性问题的资料，但是由于我对这方面的知识比较薄弱，所以并没有找到能够解决问题的方法。
后来，我想到了另一种方式：通过 JavaScript 在不同浏览器中动态地添加 CSS 代码，来让这个动画效果生效。具体的实现流程如下：
首先，我们需要在 JavaScript 中获取到需要添加动画效果的元素，这个可以通过 document.querySelector 或 document.getElementById 这些函数来实现；
然后，我们需要动态地生成对应的 CSS 代码，这个可以通过 JavaScript 中的字符串拼接来实现，即生成一段类似于下面这样的代码：
-- -------------------- ---- -------
---------- ------------ -
---- -
---------- ---------
-
-- -
---------- ---------
-
-
----------- -
--------------- -------------
------------------- ---
-------------------------- ---------
-最后，我们可以使用 style 属性将生成的 CSS 代码添加到目标元素中，这样就能够实现在不同浏览器中动态添加动画效果了。
总结
通过这个问题的解决，我更加深入地了解了前端开发中关于浏览器兼容性的知识，也学会了如何通过 JavaScript 动态添加 CSS 代码来解决兼容性问题。在遇到类似问题的时候，我也能够更加准确地判断问题所在，并且采用更加高效的解决方式。对于新手来说，解决问题的过程很漫长，但是这些经历一定能够让我们更加深刻地理解前端开发的本质。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646628b1968c7c53b06cec28