IE中的表單元格浮動DIV

首先對所有人表示抱歉，對不起我的英語。我正在嘗試在純Javascript中執行可拖動和可重複的表列。我插入單元格2區域，一個用於拖動（div），第二個用於調整大小（跨度），就像您在示例波紋管中可以看到的那樣。在Chrome和Firefox中一切正常，但不在IE8中。IE中的表單元格浮動DIV

問題是在調整大小時，div不適合單元格並在單元格下跳轉，因爲您可以在image中看到「Column1」。我會建議財產「溢出：隱藏」應該修復它，但沒有運氣。

CSS：

.ui-column-resizable 
{ 
    float:right; 
    height:20px !important; 
    display:inline; 
    cursor:w-resize; 
    position:relative; 
    overflow:hidden; 
    text-align:center; 
    white-space:nowrap; 
    background-color:blue; 
    margin: -2px -2px -2px 0; 
} 


.ui-column-draggable 
{ 
    height:17px; 
    cursor:move; 
    position:relative; 
    overflow:hidden; 
    background-color:yellow; 
    white-space:nowrap; 
    text-align:center; 
}

的JavaScript：

column.innerHTML = "<span class='ui-column-resizable'>&nbsp;</span>" + 
        "<div class='ui-column-draggable'>" + 
         column.innerHTML + 
        "</div>";

http://jsfiddle.net/A5kVs/2/

來源

2011-03-13 oFce

嘗試讓您到目前爲止已經取得使用* [的jsfiddle（http://jsfiddle.net/）*什麼樣的示範。如果你這樣做，我們可以嘗試解決你的問題。 – thirtydot 2011-03-13 22:01:18

@oFce爲什麼不使用CSS類？ – 2011-03-13 22:01:52

@thirtydot好的，我會試試jsFiddle。 – oFce 2011-03-13 22:17:48

這應該這樣做...

HTML：

<td>    
    <div class="drag"> 
     Column 1 
     <div class="resize"></div> 
    </div> 
</td>

CSS：

.drag { 
    position:relative; 
    background-color:yellow; 
    padding:1px 10px 1px 5px; 
    cursor:move; 
} 

.resize { 
    position:absolute; 
    background-color:blue; 
    right:0; 
    width:5px; 
    top:0; 
    height:100%; 
    cursor:w-resize; 
}

現場演示：http://jsfiddle.net/simevidas/5mzgP/3/

來源

2011-03-14 13:15:02

太棒了！謝謝 – oFce 2011-03-14 14:31:29

IE中的表單元格浮動DIV

回答

相關問題