html - IE:在表格单元格的顶 Angular 和底 Angular 放置两个文本行？

我有一张包含动态数据的表。
并且有一行特定的文本仅在用户将鼠标悬停在表格行上方时才显示。该行文本应“固定”在表格单元格的底部边缘。

到目前为止，它可以在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>

最佳答案

IE不支持tr：hover，您可以使用Javascript来解决此问题。

参见：http://www.xs4all.nl/~peterned/csshover.html