jquery Firefox中的可调整大小故障

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

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

这里是如何在IE8中显示出来 alt text

这里是如何在Firefox alt text 显示出来

PLZ看到右下角的调整大小图标

<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>

来源

2010-10-28 Muhammad Adeel Zahid

什么是您的DOCTYPE？ – 2010-10-28 11:41:52

这是doctype标签！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd” – 2010-10-28 12:06:22

还有使用XHTML 1.0 Strict进行标记的验证错误数量很大**。如果这是一般的网络应用程序，我强烈推荐使用HTML而不是XHTML。如果您确实需要使用XHTML，请确保您了解这些问题：http://www.w3.org/MarkUp/2004/xhtml-faq它需要特殊的服务器配置（否则它将被视为标签汤），如果你需要支持IE，你需要使用黑客。 – 2010-10-28 13:37:12

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

来源

2010-11-06 15:20:04

我的猜测是你的表格标记是无效的，但IE浏览器愿意让你摆脱困境。 Firefox对表格标记更为严格。 ~~如果您向我们展示完整标记，我们将能够更好地为您提供帮助。（当然，我可能是错的。）你没有提到你的DOCTYPE~~

更新，但标记根据W3C Validator Service是HTML5无效。有几个问题，但最相关的是th不能包含div。当大多数浏览器遇到它们时，它们会将这些东西重新定位在表外。验证者说，它是有效的HTML4，除了一些具有属性的小问题，尽管如此，所以...

编辑这是一个社区wiki，因为它没有答案的东西。祝你好运。

来源

2010-10-28 11:27:20

编辑的问题添加表标记 – 2010-10-28 11:40:10

我该如何我的td的可调整大小 – 2010-10-28 12:22:21

Downvoted。这些提示是可以的，但这里的信息太笼统了，即使有正确的验证标记，由于Firefox的bug，这在Firefox中也不起作用。在这个主题中看到我的答案。 – 2012-07-26 09:52:24

穆罕默德的答案工程，把一个div内，并使可调整大小。

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

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

来源

2012-07-26 09:51:04

-1

我已经fiexd可调整大小的Mozilla。

jsfiddle.net/tanawat/FVr5g/

来源

2013-08-09 08:07:09

请注意，[仅链接答案]（http：// meta。这样的答案应该是寻求解决方案的终点（而另一个中途停留的参考文献往往会随着时间的推移而变得陈旧）。请考虑在此添加独立的摘要，并将链接保留为参考。 – kleopatra 2013-08-09 08:35:10

jquery Firefox中的可调整大小故障

回答

相关问题