Городской портал города Оленегорск


Fieldset, легенда, border-radius и box-shadow

  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 визуализируют границы и рамки так, как я ожидал, вот так:

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.

Похожие

Как исправить проблему с подключением Wi-Fi LG G3
... из лучших производителей Android-смартфонов, а LG G3 - один из лучших продуктов, выпущенных этой компанией. Но мы не знаем ни одного смартфона, который бы работал без ошибок, а также для LG G3. Многие пользователи испытывают проблемы с подключением LG G3 Wi-Fi. Для некоторых людей Wi-Fi не подключается вообще, а для некоторых Wi-Fi падает сразу после подключения. Давайте посмотрим, как вы можете это исправить.
Цель Директивы ЕС по аккумуляторов - минимизировать влияние аккумуляторов на окружающую среду и поощрять перер...
Цель Директивы ЕС по аккумуляторов - минимизировать влияние аккумуляторов на окружающую среду и поощрять переработку материалов, которые они содержат. В Великобритании нормативные требования по переработке аккумуляторов (аккумуляторных батарей) были представлены в 2009 г. Цель нормативных требований по отработанных аккумуляторов - значительно увеличить сбор и утилизацию использованных переносных аккумуляторов в Великобритании с 3% в 2007 году до 25% в 2012 г. с последующим увеличением до

Новости

Рыбалка в Териберке
На марте туда пожалуй под закрытие дороги, становилось снять номер в мотельчике на Очередном шоссе. Галопом вылетели из строя, успели как раз к слову движения колонны. С уловкой в общем било, один-единственный

Футболка рыбалка
Главная   /  Мой блог ← Футболки логотипом armin van buuren   |  В начало  |  Футболка the pirate bay → Качественные футболка рыбалка |

Клевое место рыбалка
Мы предлагаем рыбалку и отдых в уникальном месте Москвы, национальном парке "Лосиный остров"! Нижний пруд Очищенная береговая территория идеально подходит для ловли на удочку, штекер и удобного

Светлые горы рыбалка
«Светлые горы» в Подмосковье - одно из мест, где москвичи, да и гости, могут провести время в свое удовольствие и одновременно с пользой. База расположена неподалеку от столицы. Не нужно далеко

Рыбалка на пахре
По моим наблюдениям, как двадцать лет назад, так и сейчас Пахра вполне способна одарить рыболова хорошим уловом плотвы и подлещика, а если особо повезет, то и знаменитым пахринским карасем, который тянет

Рыбалка в савельево
Ленинградское шоссе проходит по живописным местам. К ним относятся водные просторы в Карелии, живописные заводи в Завидово. Однако поехать туда, чтобы порыбачить, может не каждый. Это связано со значительной

Рыбалка на селигере
На озере Селигер рыбачить будет интересно всем, кто не любит халявы. То есть любящих платные пруды просим пройти мимо. Так как здесь ловля рыбы зависит от времени года, погоды, времени суток, умения ловить

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

Русская рыбалка 3
Игра русская рыбалка 3 - это последняя официальная версия игры, в которой есть одиночный режим. За эту игру не надо платить никаких денег – она абсолютно бесплатна, просто скачиваете ее себе на компьютер

Триал русская рыбалка
триал русская рыбалка Уважаемые рыбаки и гости, фото отчёт за 31.08.2017 года, было произведено зарыбление водоема карпом, общим весом 700 кг, навеска 0.7-1 кг. Всем успехов.

                                                                                                                                               ОЛЕНЕГОРСК 2010 - 2014                                                                                                 

создание сайта - Старт Икс