IE : 표 셀의 위쪽과 아래쪽 모서리에 두 개의 텍스트 줄을 배치 하시겠습니까?

동적 데이터가있는 테이블이 있습니다. 그리고 사용자가 테이블 행 위에 마우스를 가져갈 때만 표시되어야하는 특정 텍스트 행이 있습니다. 이 텍스트 줄은 표 셀의 아래쪽 가장자리에 '고정'되어야합니다.IE : 표 셀의 위쪽과 아래쪽 모서리에 두 개의 텍스트 줄을 배치 하시겠습니까?

Firefox에서는 작동하지만 IE에서는 실패합니다.

라이브 코드는 여기에서 볼 수있다 : 빨간색의 텍스트가 테이블 셀의 아래쪽 테두리에 고정되어야한다 http://2010resolutions.org/test/index.html

. (그들은 고정 된 높이와 너비를 갖습니다)

IE에서 어떻게 작동 시키는가?

도움을 주시면 감사하겠습니다.

여기에 코드입니다 :

<style> 
table { 
width: 500px; 
background: gray; 
} 
td { vertical-align: top; } 
.wrapper { 
position: relative; 
background: green; 
} 
tr, td, .wrapper { 
height: 100%; 
padding-bottom: 0.75em; 
} 
.bottom { 
position: absolute; 
left: 0; 
bottom: 0; 
background: red; 
} 
.bottom { visibility: hidden; } 
tr:hover .bottom { visibility: visible; } 
</style> 
<table> 
    <tr class="data"> 
    <td> 
    <div class="wrapper"> 
      This is line 1<br /> 
      This is line 2<br /> 
      This is line 3<br /> 
      <span class="bottom">Bottom line 1</span> 
     </div> 
    </td> 
    <td> 
    <div class="wrapper"> 
      This is line 4<br /> 
     This is line 5<br /> 
     This is line 6<br /> 
     <span class="bottom">Bottom line 2</span></span> 
     </div> 
    </td> 
    <td> 
    <div class="wrapper"> 
      This is line 7<br /> 
      This is line 8<br /> 
      This is line 9<br /> 
      This is line 10<br /> 
      This is line 11<br /> 
      This is line 12<br /> 
      <span class="bottom">Bottom line 3</span> 
     </div> 
    </td> 
    </tr> 
    <tr> 
<td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table>

출처

2010-05-07 diggonce