Невозможно добавить `margin` в элемент` <legend> `в Safari и Chrome (WebKit)

EDIT: по состоянию на 2012-06-11 эта ошибка была окончательно исправлена! https://bugs.webkit.org/show_bug.cgi?id=35981#c1

У меня есть довольно простая разметка:

<form action="">
    <fieldset class="compact">                  
        <legend>Member Tools</legend>
        <label for="username">Username</label>
        <input name="username" id="username" type="text"/>
        <label for="password">Password</label>
        <input name="password" id="password" type="password" />
    </fieldset>
</form>

Я пытаюсь добавить небольшой край в конец элемента legend, это отлично работает в Firefox 2 и 3, а также IE 5-8, однако в Safari и Chrome добавление margin ничего не делает, Насколько я знаю, legend - это еще один элемент уровня блока, и у Webkit не должно быть проблем с добавлением к нему margin, или я неверен?

Ответ 1

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

Итак, в моем сценарии следующее исправление проблемы добавлением поля в верхнюю часть первого элемента ярлыка (прямо под легендой) в поле:

fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}

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

Если кому-то интересно, кто-то действительно сделал сообщение об ошибке об этом # 35981

https://bugs.webkit.org/show_bug.cgi?id=35981

Спасибо всем за вклад.

Ответ 2

Ну, <legend> действительно не "просто еще один элемент уровня блока". Может быть, так и должно быть, но факт в том, что он по своей сути будет иметь особенности компоновки, поскольку он должен делать что-то довольно странное, поскольку элементы идут. Между IE и Firefox эффекты маржи и отступов на элементах <legend> очень разные.

Вы хотите просто отделить содержимое <fieldset> от верхней части окна? Если да, попробую сыграть с padding-top самого поля.

Ответ 3

Извините, что опубликовал ответ на такой старый поток, но на самом деле довольно простое решение для этого, которое не требует каких-либо взломов. Все, что вам нужно сделать, это добавить дополнение к вершине вашего элемента fieldset.

fieldset { padding: 10px 0 0; }

Это может сделать то, что я пытаюсь сказать немного более ясно: http://jsfiddle.net/8fyvY/

Ответ 4

Я только что обнаружил, что добавление отладки 1px к набору полей, похоже, внезапно информирует о полях, которые он содержит (интервал, созданный более 1 px).

Ответ 5

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

fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}

Я получаю двойную маржу в Chrome. Затем просто решите сделать следующее

fieldset > legend + *{
    padding-top:3px;
}

Надеюсь, что это поможет. Ура!

Ответ 6

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

например.

legend {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}