0

早上好，

我有一个应用程序，它允许用户滑动不同类别的值，总计高达 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错误。要对其进行测试，您可以将初始收入字段留空。

谢谢，

汤姆

4

2 回答 2

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>
于 2011-11-17T15:42:39.283 回答
0

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

如果你添加

display: block:

到td's CSS 然后拇指被正确包含。但随后尺寸将关闭。

于 2011-11-17T15:43:06.333 回答