jQuery UI slider 在使用时向上移动并消失在 div 中

Question

我已将 MooTools slider 替换为 jQuery UI slider ，因为我们的内容管理系统使用 jQuery 和各种其他 jQuery UI 元素。我遇到了一个问题，在 Firefox 和 Chrome 上， slider (水平的)在滑动时似乎会向上移动到 div 中，从而隐藏 slider 。似乎它在每一秒的移动增量中都会执行此操作。从 Firebug 看来， slider 在使用时的上边距为负，并且似乎来来去去。不幸的是，我无法展示示例，因为它位于我们的后端，但将包含所有代码。希望对 jQuery UI 有广泛了解的人可以帮助我。

slider 标记:

<div id="slider_bar">
</div>

slider 的 CSS

/* === Slider === */
.ui-slider { position: relative; text-align: left; border: 0px none; }
.ui-state-focus .ui-slider-handle { border: 0px none; }
.ui-slider .ui-slider-handle { top: -9px; margin-left: -12px; width: 30px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/slider-ball.png) 13px 10px  no-repeat; position: absolute; z-index: 60; cursor: pointer; }
.ui-slider .ui-state-hover {  }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; }
.ui-slider .ui-state-default { border: 0px none; }

.ui-slider-horizontal { width: 204px;height: 25px; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px 0px repeat-x;}
.ui-slider-horizontal .ui-slider-handle { top: -9px; margin-left: -12px; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; background: url(/../../includes/clientArea/imagesNew/manageNavigation/sliderBar.png) 0px -5px repeat-x; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

jQuery 代码

jQuery('#slider_bar').slider({ min: 10, max:18 });

页面加载时， slider 标记如下所示:

<div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
 <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a>
</div>

移动 slider 后，如下所示:

<div id="slider_bar" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: -25px; ">
 <a href="#" class="ui-slider-handle ui-state-default ui-corner-all ui-state-focus" style="left: 37.5%; "></a>
</div>

这肯定是 margin-top:-25px 导致了这个问题，但我不知道为什么 jQuery 会这样做。似乎只在 Firefox 和 Chrome 中执行此操作，但在 IE8 中则不行(某些功能实际上在 IE 中有效？？)

有什么想法吗？

Answer 1

这对我有用:

        // This fixed the conflict between slider and motools
        jQuery.ui.slider.prototype.widgetEventPrefix = 'slider';

        jQuery( "#slider-range" ).slider({
          range: true,
          min: 16,
          max: 99,
          values: [ 16, 99 ],
          slide: function( event, ui ) {
            jQuery( "#age_range" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
          }
        });