html - Internet Explorer 背景色悬停问题

Question

我在使用 IE 7 格式化表格时遇到了一个奇怪的问题。

我的表格是这样的:

在 IE 中，当使用 border-collapse 时，边框无法正确显示。这就是我使用此修复程序的原因:

.table-vmlist td { border-top: 1px solid black; }
td.col-vm-status, tr.row-details td { border-left: 1px solid black; }
td.col-vm-rdp, tr.row-details td { border-right: 1px solid black; }
.table-vmlist { border-bottom: 1px solid black;}

当悬停在该行上时，它会使用 CSS 突出显示:

.table-vmlist tr.row-vm { background-color: #A4C3EF; }
.table-vmlist tr.row-vm:hover { background-color: #91BAEF; }

现在，在 IE 7 中，当将鼠标从列表的顶部移动到底部时，每一行都会正确突出显示并且不会出现任何问题。但是，如果我将鼠标指针从列表底部移动到顶部，每隔一行似乎就会松开边框。

谁能解释一下问题是什么，以及如何解决？

这是我的标记:

<tr class="row-vm">
    <td class="col-vm-status status-1"><img title="Host Down" alt="Down" src="/Technik/vm-management/img/hoststatus_1.png"></td>
    <td class="col-vm-name">V1-VM-1</td>
    <td class="col-vm-stati">
        <img title="Ping" alt="Ping status" src="/Technik/vm-management/img/servicestatus_3.png">
        <img title="CPU" alt="CPU status" src="/Technik/vm-management/img/servicestatus_3.png">
        <img title="RAM" alt="RAM status" src="/Technik/vm-management/img/servicestatus_3.png">
        <img title="C:\ Diskspace" alt="Disk space status" src="/Technik/vm-management/img/servicestatus_3.png">
    </td>
    <td class="col-vm-owner">kus</td>
    <td class="col-vm-purpose">Citrix Testserver</td>
    <td class="col-vm-ip">-</td>
    <td class="col-vm-uptime">-</td>
    <td class="col-vm-rdp">&nbsp;</td>
</tr>

还有 CSS:

/* VM-Tabelle formatieren */
.table-vmlist { border-collapse: collapse; }
.table-vmlist tr { border: 1px solid black; }
.table-vmlist tr.row-header { border: none; }
.table-vmlist tr.row-vm { background-color: #A4C3EF; }
.table-vmlist tr.row-vm:hover { background-color: #91BAEF; }
.table-vmlist th { text-align: left; }
.table-vmlist td {  }
.table-vmlist th, table td { padding: 2px 0px; }

/* Spaltenbreite der VM-Tabelle festlegen */
.table-vmlist #col-status { width: 25px; }
.table-vmlist #col-stati { width: 90px; }
.table-vmlist #col-owner { width: 90px; }
.table-vmlist #col-ip { width: 100px; }
.table-vmlist #col-uptime { width: 70px; }
.table-vmlist #col-rdp { width: 25px; }
.table-vmlist tr.row-details td { padding: 0px 10px; }

/* Kein Rahmen um verlinkte Bilder */
a img { border-width: 0px; }

/* Für Einschaltknopf Hand-Cursor anstatt normalen Pfeil anzeigen */
td.status-1 img { cursor: pointer; }
img.ajax-loader { margin-left: 2px; }

IE 修复:

.table-vmlist td { border-top: 1px solid black; }
td.col-vm-status, tr.row-details td { border-left: 1px solid black; }
td.col-vm-rdp, tr.row-details td { border-right: 1px solid black; }
.table-vmlist { border-bottom: 1px solid black;}

Answer 1

只是一个想法，但是 :hover 选择器可能无法在 ie7 上工作，具体取决于您的 DOCTYPE。更多信息在这里:

http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thread/619c4492-ab7b-4a8e-b911-5fed8aa49457/