Impossible d'ajouter 'margin' à '' élément dans Safari et Chrome (WebKit)
EDIT : à partir du 2012-06-11, ce bug a finalement été corrigé! https://bugs.webkit.org/show_bug.cgi?id=35981#c1
J'ai un balisage assez simple:
<form action="">
<fieldset class="compact">
<legend>Member Tools</legend>
<label for="username">Username</label>
<input name="username" id="username" type="text"/>
<label for="password">Password</label>
<input name="password" id="password" type="password" />
</fieldset>
</form>
J'essaie d'ajouter une petite marge au bas de l'élément legend, cela fonctionne très bien dans Firefox 2 et 3 ainsi que IE 5-8, mais dans Safari et Chrome, l'ajout d'un margin ne fait rien. Pour autant que je sache legend est juste un autre élément de niveau de bloc et Webkit ne devrait pas avoir de problème en ajoutant un margin à lui, ou suis-je incorrect?
6 réponses
Après un peu de recherche, j'ai trouvé une solution pour cela que je crois être la méthode la moins "hacky" pour le résoudre. L'utilisation des hacks de ciblage nasty webkit n'était vraiment pas une option, mais j'ai trouvé que la propriété -webkit-margin-collapse: separate semble fonctionner pour empêcher les marges sur les éléments de s'effondrer comme elle le décrit.
Donc, dans mon scénario, ce qui suit résout le problème en ajoutant une marge en haut du premier élément label (juste en dessous de la légende) dans le fieldset:
fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}
Pas parfait, mais mieux que rien, les autres navigateurs devraient simplement réduire les marges normalement.
Si quelqu'un est curieux, quelqu'un a effectivement déposé un rapport de bogue à ce sujet # 35981
Https://bugs.webkit.org/show_bug.cgi?id=35981
Merci pour la contribution de tout le monde.
Eh bien, <legend>vraiment n'est pas " juste un autre élément de niveau bloc."Peut-être que ça devrait l'être, mais le fait est qu'il va intrinsèquement avoir des particularités de mise en page en ce sens qu'il est censé faire quelque chose d'assez bizarre, comme les éléments vont . Entre IE et Firefox, les effets de la marge et du remplissage sur les éléments <legend> sont très différents.
Voulez-vous simplement séparer le contenu <fieldset> du haut de la boîte? Si c'est le cas, j'essaierais de jouer avec padding-top du fieldset lui-même.
Désolé de poster une réponse à un si vieux fil, mais il y a en fait une solution assez facile pour cela qui ne nécessite aucun hacks. Tout ce que vous devez faire est d'ajouter un remplissage en haut de votre élément fieldset.
fieldset { padding: 10px 0 0; }
Cela pourrait faire ce que j'essaie de dire un peu plus clair: http://jsfiddle.net/8fyvY/
Je viens de trouver que l'ajout d'un remplissage 1px au fieldset semble le rendre soudainement conscient des marges qu'il contient (l'espacement créé est supérieur à 1 px).
Je rencontre ce problème et tout semble bien sur chrome mais safari fait le problème. Dans ce cas, si j'ajoute ce code
fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}
J'obtiens une double marge sur Chrome. Ensuite, décidez simplement de faire ce qui suit
fieldset > legend + *{
padding-top:3px;
}
Espérons que l'aide. À votre santé!
Pour obtenir une légende fonctionnant avec la bordure inférieure et la marge dans tous les navigateurs, j'insère une portée dans la légende, place la bordure sur la portée, définit la marge de la légende sur 0 et ajoute un remplissage au bas de la légende.
Par exemple
legend {
border: 0;
margin-bottom: 0;
padding-bottom: 20px;
}
legend span {
display: block;
border-bottom: 2px solid #f0ebe6;
}