Question

在我的网页中我有一张桌子，我希望它的第一列可以调整大小。它在IE8中工作正常但在Mozilla上它显示文档右下角的调整大小图标。这是代码

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

这是它在IE8 alt text

中的显示方式

这是它在Firefox alt text

中的显示方式

请参阅右下角的调整大小图标

<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

我的猜测是你的表格标记无效，但是IE很愿意让你侥幸逃脱。 Firefox对表标记更严格。 ~~如果您向我们展示完整标记，我们将能够为您提供更好的帮助。（当然，我可能错了。）~~

更新您尚未提及您的DOCTYPE，但根据W3C Validator Service，HTML5中的标记无效。有几个问题，但最相关的是th不能包含div。当大多数浏览器遇到它们时，它们会将这些东西重新定位到表外。验证器说它是有效的HTML4，但禁止使用属性，所以......

编辑将其设为社区维基，因为它还没有答案（我）还要继续做其他事情。祝你好运。

Answer 3

穆罕默德的回答是有效的，把一个div放在里面并使其可以调整大小。

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

他们无法真正解决它，因为它实际上是Firefox本身的一个开放问题： https://bugzilla.mozilla.org/show_bug.cgi?id=63895

Answer 4

我为Mozilla提供了可调整大小。

jsfiddle.net/tanawat/FVr5g /

jquery Firefox中可调整大小的错误

4 个答案: