jQuery Afficher/Masquer - CSS pour afficher des valeurs affectent ma mise en page

jQuery utilise le CSS display propriété sous le capot de la simple show() et hide() fonctions. Le code HTML suivant comprend trois boutons, chacun enveloppé dans un <span> tag, et tous les trois <span> balises sont placées dans un parent <div> conteneur. Au chargement de la page, le <span> balises sont masqués à l'aide de jQuery hide(), et, à un certain moment plus tard, ils sont affichés à l'aide de la show() fonction. Le HTML est maintenant dans l'état suivant avec le <span> balise ayant reçu la valeur de style display: block;.

<div style="text-align:right; width:100%;">
    <span style="display:block">
        <input type="button" value="Button1" />
    </span>
    <span style="display:block">
        <input type="button" value="Button2" />
    </span>
    <span style="display:block">
        <input type="button" value="Button3" />
    </span>
</div>

Dans Firefox (3.5) la durée d'apparition des éléments empilés verticalement les uns au dessus des autres, alors que dans IE qu'ils apparaissent en ligne. Je me serais attendu à ce dernier dans les deux navigateurs, car je pensais que la mise en page par défaut pour les balises span est en ligne.

Si je modifier manuellement le style de display:block à display: inline;, il semble correct dans Firefox. Essentiellement, lors de l'affichage d'un élément, à l'aide de jQuery est une valeur pour display qui n'est pas toujours valable. L'ajout de display: block; est suffisant pour montrer un élément, mais pas assez pour montrer avec la ligne de mise en page j'ai besoin d'.

Donc, mes questions:

  1. Est-ce un problème connu avec jQuery? Je suis à l'aide de jQuery 1.2.6.
  2. Quelqu'un a rencontré ce problème avant, et comment avez-vous entoure?

OriginalL'auteur Andy McCluggage | 2009-11-16