1. Проблемы с браузером
2. Выход из потока
3. Поплавок исправить

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

Недавно я заметил еще больше странностей fieldset + легенды, на этот раз с CSS-свойствами border-radius и box-shadow. Если вы используете какое-либо свойство для элемента fieldset, который имеет дочерний элемент легенды (что должны делать все элементы fieldset), вы получите неожиданные результаты в некоторых браузерах. К счастью, я также нашел исправление после небольшого количества экспериментов.

Для справки я создал демонстрационная страница с элементом fieldset, стилизованным под проблемные свойства, чтобы вы могли убедиться в этом сами. Соответствующий CSS это:

fieldset {border: 1px solid # 999; границы радиус: 8px; тень от рамки: 0 0 10px # 999; } legend {background: #fff; }

Chrome, Opera и Safari визуализируют границы и рамки так, как я ожидал, вот так:

Проблемы с браузером

Но затем я зарегистрировался в Firefox и увидел это:

Хотя он отображает фактическую границу так же, как браузеры Opera и WebKit, верхняя часть тени блока отодвигается от границы, как будто для освобождения места для элемента легенды. Я проверил в Firefox 3.6 и 18, чтобы увидеть, есть ли разница, но они оба ведут себя одинаково.

Следующим был Internet Explorer. Пока вы придерживаетесь box-shadow, он ведет себя как ожидалось. Ну, почти как и ожидалось - в моем примере тень блока не имеет горизонтального или вертикального смещения, только размытие в 10px, а в IE верхняя часть тени блока не проходит так далеко от границы, как от других краев , Но это не так уж и плохо, и кажется, что IE (9+, поскольку именно тогда он добавил поддержку box-shadow) делает это и с другими элементами, а не только с элементами fieldset. Посмотреть демонстрационная страница в IE9 + и взгляните на элемент p, который я добавил для справки.

Итак, это box-shadow, и теперь для некоторой странности IE, когда вы применяете border-radius к элементам fieldset. Оказывается, что и IE9, и IE10 игнорируют border-radius на фактической границе, но они делают тень вокруг рамки следующим образом:

Выход из потока

Итак, теперь нужно решить две проблемы:

• Предотвратите элемент легенды от отталкивания тени блока в Firefox
• Заставить IE применить border-radius к границе элементов fieldset

Я попытался применить исправление переноса строк (legend {display: table;}), о котором я писал в статье, о которой я упоминал ранее, но оно не влияло на border-radius или box-shadow в любом браузере.

Думая, что решением будет каким-то образом вывести элемент легенды из нормального потока, я экспериментировал с положением: абсолютным, что-то вроде работы. Это остановило Firefox от отталкивания тени блока, и IE волшебным образом начал закруглять углы границы элемента fieldset. Однако, если текст в элементе легенды достаточно длинный для переноса строк, он может охватывать часть содержимого элемента fieldset. Так что да, позиция: абсолютная может сработать, но она ненадежна, если только вы не знаете, что легенду не нужно будет переносить.

Поплавок исправить

Другой способ удалить элемент из обычного потока - это поместить его в плавающее состояние. И что вы знаете, плавающий элемент легенды имеет тот же эффект, что и позиция: абсолютная как в Firefox, так и в IE. Более того, он не заставляет элемент легенды покрывать другой контент в наборе полей на случай необходимости переноса строки. И в качестве дополнительного бонуса, float, кажется, решает проблему переноса строк в IE (включая IE8), устраняя необходимость в display: table. Но есть еще несколько побочных эффектов:

• Все браузеры теперь отображают легенду внутри верхней границы fieldset, а не поверх нее, как обычно. Чтобы исправить это, я добавил отрицательный маржинальный верх, чтобы подтянуть его обратно. Точное значение будет зависеть от того, какой отступ вы задаете для fieldset, line-height и т. Д.
• Чтобы убедиться, что другое содержимое элемента fieldset не появляется рядом с элементом legend (так как он теперь перемещен), я добавил правило, чтобы первый элемент после него очищал float: legend + * {clear :и то и другое;}.

Увидеть демонстрационная страница для нефиксированного набора полей - с позицией: абсолютная попытка и окончательное исправление, использующее float (просмотреть исходный код CSS). Вот наиболее важные части CSS:

fieldset {padding-top: 10px; граница: 1px solid # 666; границы радиус: 8px; тень от рамки: 0 0 10px # 666; } legend {float: left; Запас-топ: -20px; } легенда + * {ясно: оба; }

Короче говоря: плавающие элементы легенды, чтобы сделать перенос содержимого строк и обеспечить согласованный рендеринг элементов набора полей, стилизованных с помощью border-radius и box-shadow.

Похожие