Не может добавить 'поле' к' <легенде>' элемент в Safari & Chrome (WebKit)
Править: С 11.06.2012 этих ошибок был наконец зафиксирован! https://bugs.webkit.org/show_bug.cgi? id=35981#c1
У меня есть некоторая довольно простая разметка:
Я пытаюсь добавить маленькое поле к нижней части legend элемент, это работает просто великолепно в Firefox 2 и 3, а также IE 5-8, однако в Safari и Chrome, добавляющем a margin ничего не делает.Насколько мне известно legend просто другой элемент блочного уровня, и WebKit не должен иметь никакой проблемы, добавляющей a margin к нему, или действительно ли я являюсь неправильным?
2 ответа
После небольшого исследования я нашел способ решения этой проблемы, который, на мой взгляд, является наименее "хакерским" методом ее решения. Использование неприятных хаков нацеливания на webkit на самом деле было неприемлемым вариантом, но я обнаружил, что свойство -webkit-margin-collapse: отдельная , похоже, работает, предотвращая сворачивание полей элементов, как оно описывает.
Итак, в моем сценарии следующее устраняет проблему путем добавления поля вверху первого элемента метки (прямо под легендой) в наборе полей:
fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}
Не идеально, но лучше, чем ничего, другие браузеры должны просто свернуть поля нормально.
Если кому-то интересно, кто-то действительно отправил отчет об этой ошибке # 35981
https://bugs.webkit.org/show_bug.cgi?id=35981
Спасибо за вклад.
Ну, на самом деле не «просто еще один элемент уровня блока». Может быть, так и должно быть, но факт в том, что он по своей сути будет иметь особенности компоновки в том смысле, что он должен делать что-то довольно странное по мере движения элементов. В IE и Firefox влияние полей и отступов на элементы сильно различается.
Вы хотите просто отделить содержимое от верхней части поля? Если это так, я бы попробовал поиграть с padding-top самого набора полей.