Question

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

到目前为止，它适用于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>

Answer 1

IE不支持tr：hover，你可以用Javascript来解决这个问题。

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

IE：在表格单元格的顶角和底角放置两条文本行？

1 个答案: