Question

我正在使用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>

Answer 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”规则。

应用于表行的jQuery Sortable使行更高

1 个答案: