Легенда и Chrome

Question

Я смотрел везде, но безрезультатно.

Я получил <legend> в форме, которая отображается так, как я хочу во всех браузерах, кроме Chrome. Это как если бы он находился вне набора полей, или как будто он идет поверх следующего элемента. И это очень раздражает. Я даже не могу наложить на это поля.

Почему он отображается так?

И есть ли обходной путь?

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;
}

Answer 1

Это известная проблема с элементом legend в браузерах webkit. Чистых обходных путей для самого элемента легенды не существует, но вместо этого можно добавить поле к первому элементу, который следует за легендой.

Кроме того, вам нужно явно установить -webkit-margin-collapse: separate для этого элемента, чтобы он работал правильно. Попробуйте использовать это:

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

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

(ответ найден здесь: Невозможно добавить `margin` к элементу` `в Safari & Chrome (WebKit) )

Answer 2

Я много раз боролся с этой проблемой, что в итоге привело к тому, что я отказался от тега легенды до недавнего времени, где я снова начал использовать его, чтобы добавить больше смысла в мою разметку.

Вот исправление, которое я разработал для контроля внешнего вида макета тега легенды относительно его родных элементов:

Разметка:

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

Стили:

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

Из приведенного выше примера, чтобы достичь нижнего «поля» для желаемого тега

, вы просто примените верхний отступ к набору полей, равный величине верхнего и нижнего полей, которые вы Желание плюс явная высота тега легенды. Это толкает братьев и сестер соответствующим образом.

Если вы явно не задали высоту своей легенды, вы можете просто проверить ее на вкладке метрики инструментов Firebug или Chrome Developer, так как размер шрифта будет влиять на высоту.

Но да, довольно простое решение, я просто столкнулся с ним несколько дней назад, когда работал над проектом клиента. Затем наткнулся на этот вопрос, так как я пытался провести больше исследований по этому вопросу сегодня.

Редактировать: после публикации этого ответа я понял, что в своем исходном исправлении я применил заполнение к родительскому

из

, потому что по какой-то причине Firefox запускает верхнюю часть: 15px; от нижней части верхнего отступа, когда отступ применяется к

. Положить отступ и верх: положение относительно; на родительском div позволил

позиционировать абсолютно поверх отступа вместо того, чтобы быть нажатым отступом. Я отредактировал код выше, чтобы отразить мои выводы. Это простое решение для меня сейчас менее привлекательно, но оно определенно работает. Вот страница, которую я создал, тестирующая два метода позиционирования тега : Расположение тега Legend: http://dl.dropbox.com/u/37971131/css-testing/forms.html

Answer 3

Метод, предложенный Стефаном Мюллером, работает, только если видим элемент HTML, следующий за. Как и в моем случае, это не всегда возможно без большой реструктуризации HTML-кода. Таким образом, в дополнение к его CSS-коду

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

просто примените следующую команду jQuery, которая в основном просто вставляет пустой div (имеющий высоту 0 пикселей), но теперь соответствует селектору CSS, добавляя поле в каждом случае:

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

Answer 4

Если обновление шаблонов невозможно, вы можете использовать этот скрипт, просто поместите тег легенды в тег div

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

Надеюсь, это поможет!Наслаждайтесь кодированием ..