IE의 테이블 셀에 DIV를 부동

처음으로 모두 내 영어로 유감스럽게 생각합니다. 나는 순수한 자바 스크립트에서 드래그 가능하고 크기 조절이 가능한 테이블 컬럼을 만들려고 노력하고있다. 셀 안에 2 개의 영역을 삽입했습니다. 하나는 draging (div)을위한 것이고, 다른 하나는 크기 변경 (span)을위한 것입니다. Chrome과 Firefox에서는 모두 정상적으로 작동하지만 IE8에서는 정상적으로 작동하지 않습니다.IE의 테이블 셀에 DIV를 부동

image의 "Column1"에서 볼 수 있듯이 div가 셀에 맞지 않고 셀 아래로 이동하면 크기를 조정하는 중에 문제가 발생합니다. 나는 "overflow : hidden"속성을 수정해야한다고 제안 할 것이지만 행운은 없다.

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

자바 스크립트 :

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

@oFce 왜 CSS 클래스를 사용하지 않습니까? –

@thirtydot 좋아, jsFiddle을 시도 할 것이다. – oFce

이 그것을해야 ...

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

IE의 테이블 셀에 DIV를 부동

답변

관련 문제