Question

早上好，

我有一个应用程序，允许用户滑动不同类别的值，总计高达100％。它在Safari，Chrome甚至IE中运行良好，但在Firefox中，可拖动的句柄不会显示在正确的位置，而是显示在包装div的顶部。

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

我使用标准的jQuery UI主题滚轮，无需编辑任何内容。

用于渲染滑块的代码是：

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 bug我不能。要测试它，您可以将初始收入字段留空。

谢谢，

汤姆

Answer 1

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

从

更改滑块容器元素

<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>

Answer 2

而不是将表格单元格转换为滑块（我不认为jQuery支持它，但我可能错了，所有示例都使用div。）。在表格单元格中放置一个div，并将其用作滑块容器。

如果你添加

display: block:

到td的CSS然后正确包含拇指。但随后尺寸将会消失。

jQuery UI Slider Bar - 在Firefox中无法正常显示

2 个答案: