IE에서 테이블 셀 안의 요소 높이가 0입니다

Question

테이블 셀 안에 요소를 배치했습니다. 모든 내부 요소는 부모 td의 높이를 가져야합니다. 웬일인지 나는 IE에서 이것을 달성 할 수 없다.

또한 비어있는 셀에 요소를 동적으로 추가하고 있습니다. IE에서 위치 값을 고정하여 레이아웃을 바로 잡을 수 있었지만 일단 새로운 내부 요소를 추가하면 모든 내부 요소가 높이를 잃었습니다. 예를 들어, 창 크기를 조정하면 내부 요소가 원래의 적절한 높이를 되찾았습니다.

다음은 내부 요소의 높이가 처음 0 인 IE의 상황을 예로 들었지만 부모의 td와 같아야합니다. jsfiddle에서

table td { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border: 1px solid black; 
    vertical-align: top; 
} 

table div.container {  
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: green;  
} 

예 : http://jsfiddle.net/Visa/opdfg6t6/56/

Answer 1

는 사업부에 비 깨는 공간 ( )를 넣고 당신은 잘 될 것입니다. 참조 demo

$('.second').bind('click', function() { 
 
    var element = $('<div/>', { 
 
     'class': 'container'  
 
    }); 
 
    $(this).append(element); 
 
});

.container { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
table { 
 
    border-spacing: 0; 
 
    width: 150px; 
 
    table-layout: fixed; 
 
    position: relative; 
 
} 
 

 
table td { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    vertical-align: top; 
 
    background-clip: padding-box; 
 
} 
 

 
table div.container {  
 
    position: static; 
 
    vertical-align:top; 
 
    width: 100%; 
 
    height: auto; 
 
    background-color: green;  
 
}

<div class="container"> 
 
    <table> 
 
     <tbody> 
 
      <tr> 
 
       <td class="header"> 
 
        Header 
 
       </td> 
 
       <td class="first"> 
 
        <div class="container"> 
 
         &nbsp; 
 
        </div>         
 
       </td> 
 
       <td class="second"> 
 
        
 
       </td> 
 
      </tr> 
 
     </tbody>  
 
    </table> 
 
</div>