la leggenda tag e Chrome

Ho guardato ovunque, ma senza alcun risultato.

Ho avuto un <legend> in una forma, che viene visualizzato come voglio in tutti i browser, tranne che in Chrome. E ‘ come se si trova al di fuori del set di campi, oppure come va sulla parte superiore dell’elemento successivo. Ed è molto fastidioso. Anche io non riesco a mettere i margini su di esso.

Perché mostra come, in che modo?

E c’è una soluzione?

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;
}
  • Qual ‘ è il tuo css?
  • Sevenoaks: ho aggiunto il resto del css
  • Questo è davvero fastidioso po ‘ di layout stranezza, ho avuto lo stesso problema un paio di mesi fa: stackoverflow.com/questions/2568591/…
InformationsquelleAutor Shaoz | 2011-03-17



4 Replies
  1. 14

    Questo è un problema noto con il legend elemento browser webkit. Non ci sono soluzioni alternative per pulire la leggenda di per sé elemento, ma si potrebbe invece aggiungere il margine per il primo elemento che segue la leggenda.

    Inoltre, dovrete impostare in modo esplicito -webkit-margin-collapse: separate sull’elemento per farlo funzionare correttamente. Provare a usare questo:

    legend + * {
      -webkit-margin-top-collapse: separate;
      margin-top: 10px;
    }

    http://jsfiddle.net/JLsPs/1/

    (la risposta è qui: Impossibile aggiungere il `margine` a `<legenda> e` elemento in Safari & Chrome (WebKit))

    • Grazie per la conoscenza… C’è sempre qualcosa di sbagliato con il browser e HTML/Javascript/CSS… non C’è coerenza nel web. Aaargh… Grazie di nuovo.
    • Grazie, questa soluzione ha funzionato per me. Mi chiedo perché Chrome / Safari Sviluppatori non correggere questo !!
    • Gratta e vinci che la soluzione di cui sopra mostra anche il margine di FireFox, ma io voglio solo su Chrome 🙁
    • affrontare lo stesso problema. chrome (webkit) mostra un margine di FF … non
  2. 4

    Ho lottato con questo problema molte volte, che alla fine portano a mia abbandonare la leggenda tag fino a recente, dove ho cominciato a usare di nuovo per aggiungere più significato semantico a mio markup.

    Qui è un fix che ho ideato per controllare l’aspetto della leggenda del tag layout in relazione ai fratelli:

    Markup:

    <div class="fieldset">
      <fieldset>
        <legend>Form Section</legend>
        <div class="field_row">
          <label for="first_name">First Name</label>
          <input id="first_name" name="first_name" type="text">
        </div>
        <div class="field_row">
          <label for="last_name">Last Name</label>
          <input id="last_name" name="last_name" type="text">
        </div>
      </fieldset>
    </div>

    Stili:

    .fieldset {
      padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */
      position:relative;
    }
    legend {
      height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */
      left:15px;
      /*margin:15px 0;*/ /* Margins initially trying to achieve */
      position:absolute;
      top:15px; /* replaces top margin-top:15px; */
    }

    Dall’esempio che ho fornito sopra, al fine di raggiungere il fondo “margine” in <legenda> tag che desiderate, potrete applicare un top imbottitura per fieldset pari all’importo del margine superiore e inferiore è il desiderio più esplicito altezza della leggenda tag. Questo spinge verso il basso il <legenda>’s fratelli in giù in modo appropriato.

    Se non hai esplicitamente impostare l’altezza della tua leggenda, si può solo controllare la scheda metrica di Firebug o Chrome Developer tools, come il font-size influenzano l’altezza di esso.

    Ma sì, soluzione abbastanza semplice, mi sono appena imbattuto in un paio di giorni fa, quando si lavora su un progetto client. Quindi sono imbattuto in questa domanda, come stavo cercando di fare più ricerca su di esso oggi.

    Edit: mi sono accorto dopo aver postato questa risposta che a mio originale fix, ho applicato l’imbottitura di un genitore <div> di <fieldset> perché per qualche motivo Firefox inizia il top:15px; dal fondo del top padding, quando l’imbottitura è applicato per il <fieldset>. Mettere il padding-top e position:relative; il padre div consentito l’ <legenda> posizione assolutamente sopra l’imbottitura invece di essere spinto verso il basso da imbottitura. Ho modificato il codice sopra per riflettere i miei risultati. Questa soluzione, partita semplice, è meno attraente per me, ora, ma sicuramente funziona. Qui è una pagina che ho creato, il test di due metodi di posizionamento <legenda> tag: La leggenda posizionamento di tag: http://dl.dropbox.com/u/37971131/css-testing/forms.html

    • position:absolute; fisso leggenda‘s problemi di rendering in Chrome 55 per me. Grazie.
  3. 1

    Il metodo proposto da Stefano Muller funziona solo se l’elemento HTML il seguente è visibile. Come nel mio caso, questo non è sempre possibile senza potenzialmente ampio di ristrutturazione del codice HTML. Così, oltre al suo codice CSS

    legend + * {
      -webkit-margin-top-collapse: separate;
      margin-top: 10px;
    }

    basta applicare la seguente jQuery comando, che sostanzialmente si inserisce solo un div vuoto (con altezza di 0 px), ma ora il selettore CSS aggiungendo il margine in ogni caso:

    $('legend + *').not(':visible').each(function() {
      $('<div></div>').insertBefore($(this)); 
    }
  4. 0

    Se l’aggiornamento del template non è possibile, è possibile utilizzare questo script, basta avvolgere la leggenda tag all’interno di un tag div

    jQuery('legend').each(function() {
     jQuery(this).wrap( "<div></div>" ); 
    });

    Spero che questo aiuta! Godere di codifica..

Lascia un commento