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/

尝试让您到目前为止已经取得使用* [的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/

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

IE中的表单元格浮动DIV

相关推荐