jQuery Sortable, примененный к строкам таблицы, делает строки выше

Я готовлю пользовательское позиционирование строк таблицы с помощью jQuery UI Sortable, но столкнулся с серьезной проблемой. Всякий раз, когда я беру строку, она увеличивается примерно на 2px высоты. Однако поля, высота, отступы и т. д. остаются прежними. Я создал тестовую страницу без дополнительных скриптов и стилей. Можно ли что-нибудь сделать, чтобы предотвратить возникновение этой проблемы строки становятся выше? Спасибо.

jQuery: 1.4.4, пользовательский интерфейс jQuery: 1.8.9

Изменить: это происходит в Chrome и Safari (другие браузеры не тестировались) на Mac. Этот самый пример на 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>

jquery jquery-ui jquery-ui-sortable
person Mikulas Dite    schedule 25.01.2011    source источник
comment
Этот точный код отлично работает для меня в Chrome 10.0.644.0 для Ubuntu. Никаких дополнительных отступов не появляется, как вы описываете. Не уверен, как этот комментарий поможет вам - просто точка данных на случай, если это произойдет.   -  person Ben Lee    schedule 25.01.2011
comment
так же, как @Ben Lee, вот jsFiddle, который демонстрирует, что: 1 Возможно, разместите соответствующую таблицу стилей, может помочь или быть проблемой и т. д. Отредактировано, протестировано в FF/IE в Windows.   -  person Jason Benson    schedule 25.01.2011
comment
Дает ли ваш css границу выбранному элементу? В IE (в последнее время мне не приходилось разрабатывать для chrome/safari) я знаю, что добавление границы повлияет на высоту элемента из-за того, как IE применяет слои заполнения, поля и границы. Что граница на самом деле отделена от высоты. Может быть такая же реализация и для вас.   -  person scrappedcola    schedule 25.01.2011
comment
Я пробовал это без применения каких-либо стилей. Возможно, моя версия Chrome отличается от стилей по умолчанию или мои расширения или приложения изменили его.   -  person Mikulas Dite    schedule 25.01.2011

Ответы (1)


arrow_upward
2
arrow_downward

Я не знаю, в чем проблема (поскольку это работает для меня), но если это работает для вас в jsfiddle, это определенно одно из тех правил css в normalize.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».

person Ben Lee    schedule 25.01.2011
comment
Спасибо, на самом деле это был table, на самом деле border-spacing. - person Mikulas Dite; 25.01.2011
comment
@Mikulas, в таком случае, если вы заботитесь о том, чтобы он работал в более ранних версиях IE, вам, вероятно, также следует добавить атрибут cellspacing="0" к атрибуту <table>. У ранних IE были проблемы, когда только атрибут работал правильно, и он игнорировал правило css. - person Ben Lee; 25.01.2011
comment
Интересно, обязательно добавлю это правило. Спасибо. - person Mikulas Dite; 25.01.2011
comment
Я видел ту же проблему (расстояние между строками в таблице увеличивалось каждый раз, когда строка перетаскивалась в новую позицию) при использовании jQuery v1.5.1 и jQueryUi v1.8.11 — в Chrome 19.0.1084.52. Изменение border-spacing: 0 5px на border-spacing: 0 решило проблему (но, конечно, изменило макет). - person Chris; 09.06.2012