1

我为此写了一个小提琴（http://jsfiddle.net/929Zb/5/），将问题减少到演示问题的最小标记......这是我的Highchart没有在Safari中呈现（版本5.1.7 在 Windows 上，但我也在 MacBook 上以最新版本运行它。）

我的要求是小部件的多列布局，如在 chrome 中运行的小提琴的屏幕截图所示：

Chrome 正确显示图表

这是在 Safari 中运行的相同内容：

Safari 不显示图表

Safari 已经渲染了 SVG 并在调试中悬停在它上面突出显示 HTML 中的蓝色元素，但它就是看不到！！

我用来显示列的 css 如下所示。如果您将列数从 2 更改为 1，则图表在 Safari 中显示正常！！

.widget-container
{
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
}
.widget {
    /* This is required to keep the widget div's together and not break them over columns  */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
margin-bottom: 2em; 
}

是否对 CSS 进行了更改以使 Safari 正常工作，或者这是否需要 javascript 修复？我思考这是否与 CSS 过渡有关，因此尝试关闭动画，但鉴于它仍在动画，我显然语法错误。我对这个问题有时间限制，所以我现在发布，但如果我有任何进展会报告。

4

1 回答 1

1

我认为这是在不同于第一个列的任何列中显示图表的一些 CSS 问题。如果您禁用colum-break-inside，它也可以工作。

我能建议的是禁用图表容器的位置：http: //jsfiddle.net/929Zb/17/

.highcharts-container {
    position: inherit !important;
}
于 2013-09-19T15:18:55.250 回答