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/...

OriginalL'auteur Shaoz | 2011-03-17