应用于表格行的 jQuery Sortable 使行更高答案

【问题标题】：jQuery Sortable applied to table rows makes rows taller应用于表格行的 jQuery Sortable 使行更高
【发布时间】：2011-01-25 16:30:03
【问题描述】：

我正在使用 jQuery UI Sortable 为表格行准备自定义定位，但我遇到了一个主要问题。每当我抓住一行时，它都会增加大约2px 高度。但是，边距、高度、填充等保持不变。我创建了一个测试页面，没有任何额外的脚本或样式。我能做些什么来防止这个行变高问题的发生吗？谢谢。

jQuery：1.4.4，jQuery UI：1.8.9

编辑：这发生在 Mac 上的 Chrome 和 Safari（尚未测试其他浏览器）中。 jsFiddle 上的这个例子很好用：http://jsfiddle.net/yA47C/，但我不太确定那里有什么不同。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>    
</head>

<body>
    <table>
        <thead>
            <tr><th>header</th></tr>
        </thead>
        <tbody class="sortable">
            <tr><td>row 1</td></tr>
            <tr><td>row 2</td></tr>
            <tr><td>row 3</td></tr>
            <tr><td>row 4</td></tr>
            <tr><td>row 5</td></tr>
        </tbody>
    </table> 
    <script> 
    $(function() {
        $(".sortable").sortable();
    });
    </script>
</body> 
</html>

【问题讨论】：

这个确切的代码在 Ubuntu 的 Chrome 10.0.644.0 中对我来说很好用。如您所描述的，没有出现额外的填充。不确定此评论对您有何帮助 - 只是一个数据点，以防万一。
与@Ben Lee 相同，这里有一个 jsFiddle 证明：jsfiddle.net/jbenson/tpJjm/1 也许发布您的相关样式表，可能有帮助或成为问题等。在 Windows 上的 FF/IE 中编辑和测试。跨度>
你的 css 是否给所选元素添加了边框？在 IE 中（最近不必为 chrome/safari 开发）我知道添加边框会影响元素的高度，因为 IE 应用填充、边距和边框层的方式。边界实际上是高度的一部分。您的实现也可能相同。
我试过没有应用任何样式。可能是我的 Chrome 版本的默认样式不同，或者我的扩展程序或应用程序更改了它。

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

我不知道问题是什么（因为这对我有用），但如果它在 jsfiddle 中对你有用，那么它肯定是 normalize.css 中为你修复它的那些 css 规则之一：

http://fiddle.jshell.net/css/normalize.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset
input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}

如果我不得不猜测，我会说这是“表格”规则。也可以是“td”规则。

【讨论】：

谢谢，原来是table，实际上是border-spacing。
@Mikulas，在这种情况下，如果您关心它在早期版本的 IE 中工作，那么您可能还应该在<table> 中添加一个cellspacing="0" 属性。早期的 IE 存在只有属性正常工作的问题，它忽略了 css 规则。
有趣，我一定会添加这条规则。谢谢。
我在使用 jQuery v1.5.1 和 jQueryUi v1.8.11 时看到了同样的问题（每次将行拖到新位置时表格行间距都会增加） - 在 Chrome 19.0.1084.52 上看到。将border-spacing: 0 5px 更改为border-spacing: 0 解决了问题（当然也更改了布局）。