jQueryUI：可排序 当TABLE的css显示属性设置为RELATIVE时，会混乱，即任何IE

Question

由于标题描述了大部分问题。以下是在Firefox中按预期工作的示例代码。有人可以提供解决方法或解决方法吗？ In action

JavaScript的

$(function()
  {
    $('table thead').sortable({
      items: 'th',
      containment: 'document',
      helper: 'clone',
      cursor: 'move',
      placeholder: 'placeHold',
      start: function(e, ui) {
        $overlay=$('<div>').css({ position: 'fixed', left: 0, top: 0, backgroundColor: 'black', opacity: 0.4, width: '100%', height: '100%', zIndex: 500 }).attr('id','sortOverlay').prependTo(document.body);
        $(this).parent().css({ position: 'relative', zIndex: 1000});
      },
      stop: function(e, ui){
        $('#sortOverlay').remove();
        $(this).parent().css({ position: 'static' });
    }
    });
});

CSS

<style type="text/css">
  table {
    background-color: #f3f3f3;
  }
  table thead {
    background-color: #c1c1c1;
  }
  .placeHold {
    background-color: white;
  }
</style>

HTML

<table>
    <thead><th>th1</th><th>th2</th><th>th3</th><th>th4</th></thead>
    <tbody>
      <tr>
        <td>content</td><td>content</td><td>content</td><td>content</td>
      </tr>
    </tbody>
  </table>

Answer 1

这个问题已在这里得到解答：Why is my thead not appearing in Internet Explorer?

您直接在<thead>组中包含<th>元素;这实际上并不合法。您必须将它们包含在<tr>元素中，并将其放在<thead>中...