la légende de la balise et Chrome
J'ai cherché partout mais en vain.
J'ai eu un <legend>
dans un formulaire, qui s'affiche comme je veux dans tous les navigateurs, sauf dans Chrome. C'est comme s'il se trouve en dehors de la fieldset, ou c'est comme il va sur le dessus de l'élément suivant. Et c'est très ennuyeux. Je ne peux même pas mettre les marges.
Pourquoi affiche-t-il comme?
Et est-il une solution?
HTML:
<fieldset class="col-12-box-bottom add-extras">
<legend class="plus">Add Promotion Code</legend>
<ul id="promo-fields">
<li><input class="field-small" type="text" /></li>
<li><button class="but-sec" type="submit">Apply</button></li>
</ul>
</fieldset>
CSS:
.add-extras legend{
width: 260px;
height: 0px;
border: 1px solid red;
display: block;
margin-top: 10px;
}
.add-extras fieldset{
position: relative;
}
.add-extras ul{
padding: 0 0 20px 0 !important;
overflow: hidden;
}
.add-extras li{
list-style-type: none;
float: left;
margin: 0 18px 0 0;
}
.add-extras li:last-child a{
color: #afafaf;
display: block;
margin: 27px 0px 0 0;
}
fieldset.add-extras{
margin: 0px 0 23px 0;
}
.add-extras label{
float: none;
display: block;
text-align: left;
width: 110px;
font-weight: bold;
margin: 0 0 5px 0;
}
Qu'est-ce que le reste de votre css?
Sevenoaks: j'ai ajouté le reste de la css
C'est vraiment un peu ennuyeux disposition caprice, j'ai eu le même problème il y a quelques mois: stackoverflow.com/questions/2568591/...
Sevenoaks: j'ai ajouté le reste de la css
C'est vraiment un peu ennuyeux disposition caprice, j'ai eu le même problème il y a quelques mois: stackoverflow.com/questions/2568591/...
OriginalL'auteur Shaoz | 2011-03-17
Vous devez vous connecter pour publier un commentaire.
C'est un problème connu avec le
legend
élément dans les navigateurs webkit. Il n'y a pas de nettoyer les solutions de contournement pour la légende de l'élément lui-même, mais vous pouvez ajouter la marge pour le premier élément qui suit la légende.Aussi, vous devez définir explicitement
-webkit-margin-collapse: separate
sur cet élément pour le faire fonctionner correctement. Essayez d'utiliser ceci:http://jsfiddle.net/JLsPs/1/
(réponse trouvée ici: Ne peut pas ajouter de "marge" pour " <legend>` élément dans Safari & Chrome (WebKit))
Merci, cette solution a fonctionné pour moi. Je me demande pourquoi le Chrome / Safari Développeurs de ne pas corriger cela !!
Scratch, la solution ci-dessus montre également la marge sur FireFox, mais je ne le veux sur Chrome 🙁
confrontés au même problème. chrome (webkit) montre une marge ... FF pas
OriginalL'auteur Stephan Muller
J'ai eu du mal avec cette question de nombreuses fois, pour aboutir finalement à mon abandon de la légende de la balise jusqu'à récemment, où j'ai commencé à l'utiliser à nouveau pour ajouter plus de sens sémantique au balisage.
Ici est une solution que j'ai conçu pour contrôler l'apparence de la légende de l'étiquette de mise en page en fonction de ses frères et sœurs:
Balisage:
Styles:
À partir de l'exemple que j'ai fourni ci-dessus, afin d'atteindre le bas "de la marge" sur le <legend> tag que vous désirez, il vous suffit d'appliquer un top rembourrage pour le fieldset égale au montant de la marge haut et bas, vous avez le désir le plus explicite de la hauteur de la légende de la balise. Cela pousse le <legend>'s frères et sœurs en bas de façon appropriée.
Si vous n'avez pas explicitement défini la hauteur de votre légende, vous pouvez simplement vérifier dans la métrique de l'onglet de Firebug ou Chrome Developer tools, comme la taille de police va affecter la hauteur.
Mais ouais, assez simple solution, je viens de croiser à nouveau il y a quelques jours lorsque vous travaillez sur un projet client. Alors tombé sur cette question, comme j'étais en train de faire plus de recherches sur elle aujourd'hui.
Edit: j'ai réalisé après l'affichage de cette réponse originale dans ma correction, j'ai appliqué le rembourrage pour un parent <div> <fieldset> parce que, pour une raison quelconque Firefox démarre le top:15px; partir du bas de la partie supérieure de rembourrage, lorsque le remplissage est appliqué à la <fieldset>. Mettre le padding-top et position:relative; sur le div parent permis à la <legend> position absolument plus le rembourrage au lieu d'être poussé par le rembourrage. J'ai édité le code ci-dessus pour refléter mes conclusions. Cette solution qui a commencé simple, est de moins en moins attrayant pour moi maintenant, mais cela fonctionne bien. Voici une page que j'ai créé, le test de deux méthodes de positionnement du <legend> tag: La légende de la balise de positionnement: http://dl.dropbox.com/u/37971131/css-testing/forms.html
position:absolute;
fixe légende's problèmes de rendu de Chrome 55 pour moi. Merci.OriginalL'auteur CSSDevMonkey
La méthode proposée par Stephan Muller ne fonctionne que si l'élément HTML suivant l'est visible. Comme dans mon cas, ce n'est pas toujours possible sans risquer de grande restructuration du code HTML. Ainsi, en plus de son code CSS
il suffit d'appliquer la suivante jQuery commande, qui est fondamentalement juste insère un div vide (ayant une hauteur de 0 px) mais maintenant correspond au sélecteur CSS en ajoutant la marge dans tous les cas:
OriginalL'auteur m4r73n
Si la mise à jour des modèles n'est pas possible, vous pouvez utiliser ce script, il suffit de l'envelopper de la légende de la balise à l'intérieur d'une balise div
Espérons que cette aide! Profitez de codage..
OriginalL'auteur Ervin Llojku