Firefox中的jquery可调整大小故障

Question

在我的网页中，我有一个表格，我希望它的第一列是可调整大小的。它在IE8中运行良好，但在Mozilla上，它会在文档的右下角显示调整大小的图标。这是代码

$(".resizable").resizable({
            maxHeight: 25,
            maxWidth: 350,
            minHeight: 25,
            minWidth: 150
        });

下面是它在IE8中的显示方式

​

下面是它在Firefox中的显示方式

​

请查看右下角的调整大小图标

<table cellspacing="0">
    <thead>
        <tr>
            <th class="resizable ui-resizable">Task Number<div class="ui-resizable-handle ui-resizable-e" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on" style="-moz-user-select: none;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; -moz-user-select: none;" unselectable="on"></div></th>
            <th>Start Date</th>
            <th>Duration</th>
            <th style="width: 100px;">DeadLine</th>
            <th>Parent TaskID</th>

        </tr>
    </thead>
    <tbody>


             <tr class="1" id="row-0" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskN

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/12/2010" style="text-align: center;" name="StartDate[0]" id="StartDate_0_" class="DatePicker 11 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[0]" id="Duration_0_" class="DurationChange 11">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="2" id="row-1" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    TaskP

                </td>
                <td style="text-align: center;">
                <input type="text" value="01/11/2010" style="text-align: center;" name="StartDate[1]" id="StartDate_1_" class="DatePicker 12 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="7" name="Duration[1]" id="Duration_1_" class="DurationChange 12">

                </td>
                <td></td>
                <td></td>
             </tr>





             <tr class="3" id="row-2" style="color: blue;">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task12

                </td>
                <td style="text-align: center;">
                16/12/2010

                </td>
                <td>
                5

                </td>
                <td>18/11/2010</td>
                <td></td>
             </tr>





             <tr class="3.1" id="row-3" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task2

                </td>
                <td style="text-align: center;">
                10/12/2010

                </td>
                <td>
                5

                </td>
                <td>19/09/2010</td>
                <td>1</td>
             </tr>





             <tr class="3.1.1" id="row-4" style="color: red;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                            <span lang="on" class="navigator">&nbsp;</span>


                    </div>
                    Task3

                </td>
                <td style="text-align: center;">
                22/12/2010

                </td>
                <td>
                1

                </td>
                <td></td>
                <td>2</td>
             </tr>





             <tr class="3.1.1.1" id="row-5" style="color: red;">
                <td width="150">
                    <div style="width: 56px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task9

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[5]" id="StartDate_5_" class="DatePicker 9 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="34" name="Duration[5]" id="Duration_5_" class="DurationChange 9">

                </td>
                <td></td>
                <td>3</td>
             </tr>





             <tr class="3.1.2" id="row-6" style="color: orange;">
                <td width="150">
                    <div style="width: 42px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task10

                </td>
                <td style="text-align: center;">
                <input type="text" value="30/10/2010" style="text-align: center;" name="StartDate[6]" id="StartDate_6_" class="DatePicker 10 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="12" name="Duration[6]" id="Duration_6_" class="DurationChange 10">

                </td>
                <td>04/10/2010</td>
                <td>2</td>
             </tr>





             <tr class="3.2" id="row-7" style="color: red;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    task5

                </td>
                <td style="text-align: center;">
                <input type="text" value="25/10/2010" style="text-align: center;" name="StartDate[7]" id="StartDate_7_" class="DatePicker 5 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="3" name="Duration[7]" id="Duration_7_" class="DurationChange 5">

                </td>
                <td></td>
                <td>1</td>
             </tr>





             <tr class="3.3" id="row-8" style="color: orange;">
                <td width="150">
                    <div style="width: 28px;" class="wrapper">

                          &nbsp;

                    </div>
                    001

                </td>
                <td style="text-align: center;">
                <input type="text" value="19/10/2010" style="text-align: center;" name="StartDate[8]" id="StartDate_8_" class="DatePicker 7 hasDatepicker"> 

                </td>
                <td>
                <input type="text" value="5" name="Duration[8]" id="Duration_8_" class="DurationChange 7">

                </td>
                <td>23/10/2010</td>
                <td>1</td>
             </tr>





             <tr class="4" id="row-9" style="">
                <td width="150">
                    <div style="width: 14px;" class="wrapper">

                          &nbsp;

                    </div>
                    Task4

                </td>
                <td style="text-align: center;">
                15/01/2011

                </td>
                <td>
                5

                </td>
                <td></td>
                <td></td>
             </tr>




    </tbody>
    </table>

Answer 1

我将div放在td中，并将可调整大小的类分配给td而不是td本身，从而解决了这个问题。它现在在IE和firefox中都能正常工作

Answer 2

Muhammed的答案是有效的，在th中放一个div，并使其可调整大小。

这个问题是jQuery团队所知道的：http://bugs.jqueryui.com/ticket/8120

他们不能真正修复它，因为它实际上是火狐本身的一个开放问题：https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Answer 3

我为Mozilla设置了可调整大小的fiexd。

jsfiddle.net/tanawat/FVr5g/