Legende tag-und Chrome

Ich habe überall gesucht, aber ohne Erfolg.

Bekam ich einen <legend> in eine form, die zeigt, wie ich will, in jedem Browser, außer Chrome. Es ist wie es sitzt außerhalb des fieldset, oder es ist, wie es geht oben auf das nächste element. Und es ist sehr ärgerlich. Ich kann nicht einmal mehr die Margen auf.

Warum es zeigt, wie auf diese Weise?

Und gibt es eine Abhilfe?

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;
}
  • Was ist der rest von deinem css?
  • Sevenoaks: ich habe noch die restlichen css
  • Dies ist eine wirklich lästige kleine layout-Macke, ich hatte das gleiche Problem ein paar Monate zurück: stackoverflow.com/questions/2568591/...
InformationsquelleAutor Shaoz | 2011-03-17
  1. 14

    Dies ist ein bekanntes Problem mit der legend element in webkit-Browsern. Es gibt keine sauberen workarounds für das legend-element selbst, aber Sie könnte stattdessen fügen Sie die Marge für das erste element, folgt der Legende.

    Außerdem müssen Sie explizit festlegen -webkit-margin-collapse: separate auf das element, um es arbeiten ordnungsgemäß. Versuchen Sie es mit dieser:

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

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

    (Antwort hier gefunden: Kann nicht Hinzugefügt werden `margin` zu `<legend> " - element in Safari & Chrome (WebKit))

    • Danke für die Erkenntnis... Es gibt immer etwas falsch mit Browser und HTML/Javascript/CSS... Es gibt keine Konsistenz in der web überhaupt. Aaargh... Danke nochmals obwohl.
    • Danke, diese Lösung funktionierte für mich. Ich Frage mich, warum die Chrome / Safari die Entwickler nicht beheben !!
    • Scratch, dass, die oben genannte Lösung zeigt auch die Marge auf FireFox, aber ich möchte nur, dass es auf Chrom 🙁
    • vor dem gleichen problem. chrome (webkit) zeigt sich ein Rand ... FF nicht
    InformationsquelleAutor Stephan Muller
  2. 4

    Ich habe gekämpft, mit diesem Thema viele Male, was schließlich zu meiner Aufgabe die Legende tag, bis vor kurzem, wo ich begonnen habe, wieder verwenden, fügen Sie weitere semantische Bedeutung zu meinem markup.

    Hier ist eine Lösung, die ich geplant haben, kontrollieren Sie das Erscheinungsbild der Legende tag-layout in Bezug auf die Geschwister:

    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>

    Stile:

    .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; */
}

    Aus dem Beispiel, das ich zur Verfügung gestellt oben, um den unteren "Rand" auf das <legend> tag, dass Sie sich wünschen, werden Sie nur für eine top-Polsterung, um das fieldset gleich der Höhe der oberen und unteren Rand, die Sie wünschen, plus die die explizite Höhe der legend-tag. Dies drückt die <legend>'s Geschwister nach unten entsprechend.

    Wenn Sie nicht explizit gesetzt, wird die Höhe der Legende, können Sie einfach überprüfen Sie es heraus, in der Metrik auf der Registerkarte entweder Firebug oder Chrome Developer tools, wie die schriftart,-Größe wirkt sich auf die Höhe.

    Aber ja, ziemlich einfache Lösung, ich lief einfach in es wieder vor ein paar Tagen beim arbeiten auf einem client-Projekt. Dann kam über diese Frage, als ich versuchte zu tun, mehr Forschung über es heute.

    Edit: mir wurde klar, nachdem dieses posting eine Antwort, die in meinem original fix, bewarb ich mich in die Polsterung zu einer übergeordneten <div> der <fieldset> da für einige Grund-Firefox-startet den top:15px; von der Unterseite der oberen Polsterung, wenn die Polsterung wird angewandt, um die <fieldset>. Putting das padding-top und position:relative; auf die übergeordneten div erlaubt die <legend> positionieren absolut über der Polsterung, anstatt nach unten gedrückt, durch die Polsterung. Ich habe bearbeitet den code oben zu reflektieren, meine Erkenntnisse. Diese Lösung, die begann einfache, weniger attraktiv für mich jetzt, aber es funktioniert definitiv. Hier ist eine Seite, die ich erstellt habe, testen zwei Methoden für die Positionierung der <legend> tag: Legende tag-Positionierung: http://dl.dropbox.com/u/37971131/css-testing/forms.html

    • position:absolute; fest Legende's rendering-Probleme im Chrome-55 für mich. Danke.
    InformationsquelleAutor CSSDevMonkey
  3. 1

    Die vorgeschlagene Methode von Stephan Muller funktioniert nur, wenn das HTML-element folgenden die sichtbar ist. Wie in meinem Fall, dies ist nicht immer möglich, ohne potenziell große Umstrukturierung des HTML-Codes. So, zusätzlich zu seinen CSS-code

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

    wenden Sie einfach die folgende jQuery-Befehl, der im Grunde nur fügt ein leeres div-Element (mit einer Höhe von 0 px), aber entspricht nun dem CSS-Selektor hinzufügen der Marge in jedem Fall:

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

    Wenn das aktualisieren der Vorlagen ist nicht möglich, Sie können dieses Skript verwenden, nur wickeln Sie das legend-tag innerhalb eines div-Tags

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

    Hoffe, das hilft! Genießen Codierung..

    InformationsquelleAutor Ervin Llojku
Schreibe einen Kommentar