IE: positionne deux lignes de texte dans les coins supérieur et inférieur de la cellule du tableau?

Question

J'ai une table avec des données dynamiques. Et il y a une ligne de texte spécifique qui ne devrait être affichée que lorsqu'un utilisateur survole la rangée du tableau. Cette ligne de texte doit être "fixée" au bord inférieur de la cellule du tableau.

Cela fonctionne jusqu'à présent avec Firefox, mais échoue dans IE.

Code Live peut être vu ici: http://2010resolutions.org/test/index.html

Le texte en rouge devrait être fixé à la bordure inférieure de la cellule du tableau. (Ils auront une hauteur fixe et la largeur)

Des indices sur comment obtenir ce fonctionnement dans IE?

Toute aide est appréciée.

Voici le code:

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

Answer 1

IE ne supporte pas tr: hover, vous pouvez utiliser Javascript pour résoudre ce problème.

voir: http://www.xs4all.nl/~peterned/csshover.html