2009-05-24 6 views
0

Exemple code:Colums redimensionnent lors de l'utilisation de la bascule de l'interface utilisateur JQuery dans IE

<html> 
    <head> 
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
    <script src="jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script> 
    </head> 
    <body> 

    <table border="1" style="width:100%"> 
     <tr> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
     </tr> 
     <tr> 
      <td>a</td> 
      <td>b</td> 
      <td>c</td> 
      <td>d</td> 
     </tr> 
     <tr> 
      <td colspan="4" > 
       <div id="target">TOGGLE TEXT!!</div> 
      </td> 
     </tr> 
    </table> 

    <input type="button" value="show/hide" onclick="toggleHidden();" /> 

    <script type="text/javascript"> 

     function toggleHidden() { 

      $('#target').toggle("blind", {}, 200, null); 
     } 

    </script> 

    </body> 
</html> 

Ce code se cache et montre une div dans un td, en utilisant la fonction de basculement de l'interface utilisateur JQuery (même résultat avec le spectacle et se cacher des fonctions).

Dans FireFox, cela fonctionne très bien, mais dans IE, toutes les colonnes seront redimensionnées pendant "l'effet de bascule". Est-ce que quelqu'un sait pourquoi IE se comporte comme ça? Et s'il y a quelque chose que je peux faire dans ce code pour l'empêcher de se produire?

Répondre

4

En utilisant slideToggle au lieu de toggle ou hide/show effectivement résolu le problème!

+0

Depuis que vous avez résolu votre propre question. Allez-y et acceptez votre réponse. +1 –

+0

Merci! Je le ferai, mais c'est un 48h restriciton sur l'acceptation de vos propres réponses – fredrik

1

J'ai rencontré un problème similaire. Essayez deux choses:

1) Donnez à la table une largeur absolue en pixels, par ex. 500px

2) Essayez de mettre un espace insécable &nbsp; dans le TD contenant votre div cible, après la div pour empêcher le navigateur de l'effondrement de la cellule quand il n'y a pas de contenu dans ce:

<div id="target">TOGGLE TEXT!!</div>&nbsp;

+0

Merci pour votre rediffusion! J'ai essayé vos deux options, mais elles n'ont pas résolu le problème dans ce cas particulier. – fredrik

Questions connexes