Correction ou solution de contournement pour la boîte de dialogue jQuery dans IE6 - principaux problèmes de présentation lorsque la boîte de dialogue contient un formulaire

Question

Je travaille avec une boîte de dialogue jQuery contenant un formulaire. Dans ie6, il y a quelques pouces inexpliqués de remplissage au-dessus du formulaire. Lorsque j'élimine le formulaire du balisage, les problèmes de mise en page les plus graves disparaissent. Je l’ai essayé sans thème (par défaut), Flora et mon thème themeroller et ils semblent tous avoir le même problème.

J'ai essayé d'apporter diverses modifications au CSS de la boîte de dialogue, mais rien ne semble avoir d'effet. Une bonne quantité de CSS en ligne est écrite lorsque la boîte de dialogue est néanmoins créée, ce qui empêche l'application d'autres styles.

J'ai essayé de définir des propriétés CSS sur le formulaire lui-même, telles que le flottement, l'élimination des marges et du remplissage, l'affichage inline, etc., mais tant que le formulaire est présent, il y a un espacement supplémentaire. Quelqu'un at-il été en mesure de trouver une solution de contournement pour cela? Je préfère ne pas le pirater et avoir des contrôles de formulaire sans balise de formulaire.

Merci.

Answer 1

Chaque fois que je dois créer un thème CSS pour un site, un forum, un widget, etc. existants, je commence toujours par supprimer toutes les feuilles de style et à normaliser toutes mes marges et à les mettre à 0 pour chaque élément majeur du DOM html. Ceci est particulièrement important en ce qui concerne les CSS en ligne.

Ce que vous devriez essayer, c'est de supprimer les CSS en ligne sur l'élément de formulaire lui-même. Puis essayez quelque chose comme:

form {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

Le dépassement de capacité dans IE6 résout souvent de nombreux problèmes de marge. Essayez de définir temporairement des bordures sur tous les éléments html en utilisant le style suivant pour voir si des éléments précédents débordent dans l'espace du formulaire.

* {
    border: solid 1px #FF0000;
}

Si vous voyez les bordures imposées sur le formulaire, vous devez également tenter de limiter le débordement de cet élément.

Answer 2

Avant de modifier le code CSS, assurez-vous que votre page contient le doctype.

S'il n'a pas de type de doctype, le navigateur affichera dans 'quirks' et beaucoup de choses n’auront pas l’air très bonnes.

Answer 3

J'ai déjà eu un problème similaire avec les boutons et les marges inexpliquées. Dans IE6, certains éléments héritent des marges de leurs éléments parents. Très bizarre ...

Essayez cette solution: http: / /blog.netscraps.com/internet-explorer-bugs/ie6-ie7-margin-inheritance-bug.html

Answer 4

Essayez quelque chose comme ça:

#yourDiv { padding:1.2em; margin-right:2.4em; }

où #votreDiv est l'id du div qui contient vos tags (j'ai eu ce problème avec les entrées).