jQuery UI slider - 在 Firefox 中无法正确显示

Question

早上好

我有一个应用程序，它允许用户滑动不同类别的值，所有值的总和都达到 100%。它在 Safari、Chrome 甚至 IE 中都可以正常工作，但在 Firefox 中，可拖动 handle 不会显示在正确的位置，而是出现在包装器 div 的顶部。

我仍然可以点击它们应该所在的栏来拖动它们，这让我相信这只是一个 CSS 问题。

我使用了标准的 jQuery UI 主题滚轮，没有对其进行任何编辑。

用于渲染 slider 的代码是:

function bind_slider_bar (category) {

    $(slider_id (category) ).slider({
        min     :   0,
        max     :   100,
        value       :   budget.slider_values[category],
        start       :   function (e, ui) {
            budget.category = $(this).attr('id').replace('_slider','');
                    //sets the current global value to the slider being dragged, so the correct values get set, and the others are decreased if necessary.
        },
        stop        :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields();
            update_distribution_notifiers();

        },
        slide       :   function (e, ui) {
            update_available_budget();
            populate_distribution_fields ();
            update_distribution_notifiers();
            var my_position = $( slider_id (category) ).slider("value");
            $( draggable_handle ( category ) ).css('left', my_position);
        }
    });

}

应用程序的 URL 是 clearpointccs.org/holiday-planner - 我知道滑动条/计算上的逻辑也仍然有点问题，但我可以应对逻辑。 Firefox 错误我不能。要对其进行测试，您可以将初始收入字段留空。

谢谢，

汤姆

Answer 1

您需要将 slider 容器从 td 元素中取出，它不适合处理 slider ，因为它们以绝对定位方式运行。

更改您的 slider 容器元素

<td id="gifts_slider"></td>
<td id="parties_slider"></td>
<td id="travel_slider"></td>
<td id="food_slider"></td>
<td id="donations_slider"></td>

到

<td><div id="gifts_slider"></div></td>
<td><div id="parties_slider"></div></td>
<td><div id="travel_slider"></div></td>
<td><div id="food_slider"></div></td>
<td><div id="donations_slider"></div></td>