Javascript IE中表格单元格中的浮动DIV

首先，对不起我的英语。我试图用纯Javascript编写可拖动和可调整大小的表列。我在单元格中插入了两个区域，一个用于拖动（div），第二个用于调整大小（span），如下面的示例所示。在Chrome和Firefox中一切正常，但在IE8中则不然

问题是在调整大小的过程中，当div不适合单元格并跳转到单元格下时，您可以在中看到“Column1”。我建议属性“overflow:hidden”应该修复它，但运气不好

CSS:

JavaScript:

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

column.innerHTML=”“+
"" +  
column.innerHTML+
"";

这应该可以

HTML:

---

现场演示：

尝试演示您目前使用的产品。如果您这样做，我们可以尝试解决您的问题。@oFce为什么不使用CSS类？@thirtydot好的，我会试试JSFIDLE。@Šime Vidas这不是问题。我把它放在那里，因为我还在用它做实验。@oFce上面的代码是无效的。不能在多行中跨越字符串。

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

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

.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;
}