Ajouter / supprimer des CSS amènera IE9 à augmenter la hauteur de la table

Question

- Je ajouter un événement de souris pour le HTML TR lorsque la souris de l'utilisateur-dessus de la TR de changer certaines couleurs CSS. Mais dans IE9 semble avoir un problème que la table, la hauteur va continuer de s'accroître à chaque fois que le CSS a changé.

Remarque: le problème se produit uniquement lorsque la barre de défilement horizontale apparaît.

Voici le code HTML.

<div style="width:100%;height:100%;">
    <div class="grid">
        <div class="grid-body">
            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
                <tbody>
                    <tr>
                        <td style="width:3040px;" class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                        <td class="item">
                            <div>
                                Please mouse-over me and out
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Voici le Javascript

$(document).ready(function (){
 $('.item').mouseover(function () {
     $(this).parent().addClass("item-over");
 }).mouseout(function() {
     $(this).parent().removeClass("item-over");
 });
 }
);

Voici le CSS de réglage

 html, body {height:100%}
 body {
     margin: 0; padding: 0 5px;
 }
 div.grid {
     background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
 }
 div.grid-body {
     background: red; border: 0; overflow: auto; width: 100%; position: relative;
 }
 tr.item-over {
     color: #6eadff;
 }

Vous pouvez exécuter entièrement exemple ici.

Answer 1

Voici une autre solution qui semble également fonctionner dans mon cas.

Le réglage de N'IMPORTE QUELLE marge (haut, droite, bas, gauche ou n'importe quelle combinaison) sur "auto" semble résoudre le problème.

 div.grid-body {
    margin: 0px auto;
}
 

Ou:

 div.grid-body {
    margin-top: auto;
}
 

Etc.

Answer 2

Un autre correctif possible suggéré dans l'article de blog IE9 Hover Bug Workaround :

 div.grid-body {
    min-height: 0%;
}
 

Answer 3

Au cas où quelqu'un viendrait ici chercher un correctif pour le plug-in jquery de datatables, la classe à laquelle ajouter ce correctif est:

 .dataTables_scrollBody
{
    margin-top:auto;
}
 

Il a fallu creuser un peu pour trouver la bonne div, alors je me suis dit que j'essaierais de sauver du temps à quelqu'un.

Answer 4

J'aurais peut-être simplement résolu le problème.

Essayer:

 width: 100%;
display: inline-block;
 

sur l'élément conteneur ("div.grid-body" dans ce cas).

Answer 5

Il arrête de le faire et effectue le survol de la souris en définissant:

 div.grid-body {
     fond: rouge; bordure: 0; débordement caché; largeur: 100%; position: relative;
 }

au lieu de débordement: auto. Mabe, vous préférez utiliser débordement: défilement ou visible. Et faites-le déclencher en tant que propriété supplémentaire uniquement pour le cas IE9.