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

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

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

<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, или я ошибаюсь?


html css legend webkit
person Graham Conzett    schedule 02.04.2010    source источник
comment
Google может заставить Quake II работать в HTML 5 в Safari и Chrome. И все же я тоже борюсь с аномалиями CSS. Ирония в мире клиента не перестает меня удивлять. googlewebtoolkit.blogspot.com/2010/04/look-ma- нет-plugin.html   -  person John K    schedule 02.04.2010
comment
Уже более двух лет, а до сих пор не адресовано! bugs.webkit.org/show_bug.cgi?id=35981   -  person Graham Conzett    schedule 02.05.2012
comment
Эта проблема по-прежнему существует в последней версии Windows (5.1.7), выпущенной в мае 2012 года. Apple больше не разрабатывает Safari для Windows, так что не ждите исправления.   -  person Joseph Woodward    schedule 04.07.2014

Ответы (6)


arrow_upward
16
arrow_downward

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

Спасибо за вклад каждого.

person Graham Conzett    schedule 09.04.2010
comment
Что вы думаете об этом решении? legend + label { -webkit-margin-top-collapse: separate; margin-top: 3px; } Он должен быть более общим и иметь более широкую поддержку браузеров (CSS2 вместо CSS3). - person ccyrille; 05.11.2013

arrow_upward
6
arrow_downward

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

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

person Pointy    schedule 02.04.2010
comment
Спасибо за ответ. Возвращаясь назад и пытаясь найти это в спецификации, я не могу сказать, что это должно быть, все, что я установил для отображения, не имеет никакого эффекта. Я бы попытался отрегулировать заполнение набора полей, но я хочу увеличить расстояние между нижней частью легенды и первой меткой. - person Graham Conzett; 03.04.2010
comment
Что ж, <legend> — один из тех возвратов в прошлое. То, что вы можете стилизовать его вообще, просто удивительно :-) У меня есть несколько стилизованных наборов полей в моем собственном приложении, и я планирую в какой-то момент переделать их с помощью старых простых блоков <div>. так что я могу устранить некоторые различия в браузерах (в основном о горизонтальном позиционировании, но это та же проблема). - person Pointy; 03.04.2010

arrow_upward
5
arrow_downward

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

fieldset { padding: 10px 0 0; }

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

person Wex    schedule 10.09.2011
comment
этот отступ работает по-разному в IE8 и 7. Он помещает отступ над легендой. - person topwik; 29.11.2011
comment
Так странно. Учитывая, что легенда находится внутри набора полей, не будет ли более разумно применять отступ над легендой, как это делают ie7 и 8? - person quoo; 12.04.2012
comment
Бьет меня. Я наткнулся на это решение чисто случайно. - person Wex; 13.04.2012
comment
Теоретически хорошая идея, но если у вас более одного тега <legend> в <fieldset>, вы все равно не получите желаемых результатов. - person David Gard; 15.05.2012
comment
Должен ли один элемент <fieldset> иметь не только один максимум <legend>? - person Nick; 21.12.2012
comment
@Nic: HTML 4 DTD и спецификация HTML 5 еще строже: <legend> может существовать как первый дочерний элемент <fieldset>, и все (хотя в описании HTML5 <fieldset> указано, что имя группы дается первым элементом легенды, который является дочерним элементом элемента fieldset, если таковой имеется, что можно прочитать как означающее, что более поздние <legend> игнорируются) . - person outis; 25.12.2012

arrow_upward
4
arrow_downward

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

person Evanss    schedule 14.07.2011

arrow_upward
1
arrow_downward

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

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

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

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

Надеюсь, что поможет. Ваше здоровье!

person Kaloyan Stamatov    schedule 10.01.2013

arrow_upward
1
arrow_downward

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

e.g.

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

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