Невозможно добавить `margin` к элементу` <legend>`в Safari & Chrome (WebKit) - PullRequest
Новая
       25

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

23 голосов
/ 02 апреля 2010

РЕДАКТИРОВАТЬ : Начиная с 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 к нему, или я ошибаюсь?

Ответы [ 6 ]

16 голосов
/ 09 апреля 2010

После небольшого исследования я нашел обходной путь для этого, который я считаю наименее "хакерским" методом для его решения. Использование мерзких хакерских атак на веб-наборы на самом деле не было возможным, но я обнаружил, что свойство -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

Спасибо за всеобщее мнение.

5 голосов
/ 10 сентября 2011

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

fieldset { padding: 10px 0 0; }

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

5 голосов
/ 02 апреля 2010

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

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

4 голосов
/ 14 июля 2011

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

1 голос
/ 19 июня 2013

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

, например 

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

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}
1 голос
/ 10 января 2013

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

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

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

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

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

...