Slider CSS、jQuery和layout——我的滑块手柄喜欢飞走

Question

https://www.radiumhosting.com/clients/nodecart.php

将手柄向右滑动一个节点时，div class='i-slider'id='slider'的边距从0变为0；到边距：-60px 0 0；导致div向上移动。在我开始处理这个问题之前，节点也会向上移动，但我添加了div style="height:60px；"来强制它们保持原位。这是下面片段的第4行。

有人对保持div id="slider"不动有什么创造性的想法吗？

                <div class="slider-background-repeat">
                <div class="slider-background-left">
                    <div class='slider-wrap'>
                    <div style="height:60px;">
                        <div class='ui-slider' id='slider'>
                          <div class='ui-slider-handle'></div>
                            <div class='handle-text nodes-1'></div>
                            <input class="text text" id="numNodes" name="numNodes" value="{$defaultNodes}" size="30" type="text" />
                        </div>
                     </div>   
                        <ul class='slider-nodes' id='slider-nodes'></ul>
                        <div id='nodesprev' onClick="MoveNodesBack()" ><img src="./modules/servers/vpsnet/assets/images/prev.png" border="0"></div>
                        <div id='nodesnext' onClick="MoveNodesForward()"><img src="./modules/servers/vpsnet/assets/images/next.png" border="0"></div>
                    </div>
                </div>

Answer 1

看起来CSS的第20行是添加到句柄中的类

#vps-net-slider .slider-wrap #slider.ui-slider .ui-slider-handle.active { background-position:-75px -20px;}

这个类是在slide.js文件的597行附近添加的。我很确定这就是引起你问题的原因。