highCharts滚动条在火狐浏览器中的坑

前几天接个任务：把系统的中图表（highCharts）添加一个滚动条：

添加滚动条示例：https://jshare.com.cn/temp/eVGyA0/1

但是第一个问题出现了，无论我按照文档上的怎么改，发现使终不生效。

经过小编一阵忙乎，最终想起来版本的事情，才发现我们系统中是4.0.1的版本，现在都更新到了8.1.0的版本，等我替换了新版本的js,果然就生效了。正当我开始高兴的时候，这时候问题来了：

我发现我的滚动条在谷歌浏览器，360上面都是正常显示的，无比完美，但是放到了火狐浏览器上面，x轴跟y轴就分家了似的，相隔甚远，y轴跟标题等都跑到了最上方：见下图：

 

 这时候我就疑惑了，为什么会这样，我就去跑去highcharts论坛上去问，是不是对火狐浏览器有兼容性问题，但是迟迟得不到回复，我就百度，大家都没有兼容性问题，为什么偏偏我有呢，我就不信邪的开始研究我的代码，最终删除的只剩一个图表，还是有这种问题，然后在我快要绝望的时候，我就打开了火狐的控制台，我觉得一定是样式的问题，我就开始一点一点的找每一行的样式跟谷歌浏览器有什么不同：终于让我看到了有一点不同：就是highCharts中有一个class:【highcharts-fixed】，它里面的样式，火狐浏览器跟谷歌浏览器竟然不同：

                                                                  火狐浏览器highcharts-fixed样式

 

                                                                 谷歌浏览器highcharts-fixed样式

大家可以看到火狐比谷歌浏览器多了一样式，那就是top:0  直接让y轴上的东西距离顶部为0。这便是关键所在，看到这点的不同，我就突然拥有了全世界，于是我赶紧把自己的页面上对.highcharts-fixed重新定义了top的属性，加上！important的属性，问题迎刃而解，代码如下：

.highcharts-fixed{
            top:auto !important;
}

可以开开心心的跳绳去了，散会。