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中的可調整大小故障

回答

相關問題