javascript - Highcharts - Safari/IE 的自定义导航器拖动器问题

Question

我找不到关于这个问题的任何帖子，所以我想问一下。我正在使用 Highcharts 的自定义滚动条/导航器，目前我在 Safari 和所有版本的 Internet Explorer 中遇到显示问题。

自定义滚动条的显示方式如下:

这是它在 Safari/IE 中的显示方式:

如您所见，在 Safari/IE 中，似乎有一个默认的拖动器显示在自定义拖动器的后面，我似乎不知道如何隐藏它。以前有人遇到过这个问题吗？下面是用于在滚动条上创建自定义句柄的代码:

(function (H) {
  var d = false;

  H.wrap(H.Scroller.prototype, 'init', function (proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });

  H.wrap(H.Scroller.prototype, 'addEvents', function (proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  });

  H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    H.each(this.handles, function (handle, index) {
      var element = handle.element;

      if (index == 0) {
        element.innerHTML = '';
        element.appendChild(parseSVG('<polygon fill="#464644" points="0,28 6.5,28 6.5,23.6 13,14 6.5,3.8 6.5,0 0,0 " stroke-width="0"></polygon>'));
        $(element).attr({'transform': "translate(" + (handle.translateX) + ',' + (handle.translateY - 6) + ')'}).addClass('drag_knob');
      }
      else {
        element.innerHTML = '';
        element.appendChild(parseSVG('<polygon fill="#464644" points="13,28 6.5,28 6.5,23.6 0,14 6.5,3.8 6.5,0 13,0 " stroke-width="0"/>'));
        $(element).attr({'transform': "translate(" + (handle.translateX - 12) + ',' + (handle.translateY - 6) + ')'}).addClass('drag_knob');
      }
    })
  });

  function parseSVG(s) {
    var div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'),
      frag = document.createDocumentFragment();

    div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg">' + s + '</svg>;';

    while (div.firstChild.firstChild) {
      frag.appendChild(div.firstChild.firstChild);
    }
    return frag;
  }
}(Highcharts));

Answer 1

啊哈，我想通了。出于某种原因，在 IE/Safari 中，使用此模块时，会添加一些额外的元素(<rect> 和 <path>)。所以解决方案是添加一些 CSS 来隐藏这些元素:

.highcharts-navigator-handle-left, .highcharts-navigator-handle-right {
    path, rect {
      display: none;
    }
 }