2010-05-10 3 views
0

J'ai un problème étrange avec table formattage en utilisant IE 7.Internet Explorer problème de vol stationnaire couleur de fond

Ma table ressemble à ceci:

Correct table rendering

Dans IE, lors de l'utilisation effondrement des frontières, les bordures ne sont pas affichées correctement. Voilà pourquoi je ce correctif:

.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;} 

Lorsque planant au-dessus de la ligne, il est mise en surbrillance avec CSS:

Table highlighting

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

Maintenant, dans IE 7, lors du déplacement de la souris de la En haut de la liste, chaque ligne est mise en surbrillance correctement et aucun problème ne se produit. Mais si je déplace le pointeur de la souris du bas de la liste vers le haut, tous les deux rangs semblent perdre la bordure.

IE7 Bug

Quelqu'un peut-il expliquer ce que le problème et comment le résoudre?

Ceci est mon balisage:

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

Et le 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 fix:

.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;} 

Répondre

1

Juste une pensée, mais le: sélecteur de vol stationnaire ne peut pas travailler sur IE7 en fonction de votre DOCTYPE. Plus d'infos ici:

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

+0

Je pense que cela n'a rien à voir avec le doctype. J'ai utilisé le doctype pour "XHTML Transitional", mais même quand je le change en HTML, le bug persiste. Fonctionne parfaitement avec IE8. –

+0

c'est le problème. il ne devrait pas être transitoire, il devrait être strict. essayez ceci: Merci – corroded

+0

corrodé, j'étais avoir un problème similaire ces dernières heures avec un menu déroulant CSS personnalisé et c'était simplement le doctype que vous avez spécifié ci-dessus qui l'a corrigé. – David

Questions connexes