CSS: фон в строчных элементах
07.05.2011 технологии
Если вы попробуете прописать значение background у строчного элемента (a, span, b и т. п.), то высота фона будет соответствовать… а честно говоря даже не знаю чему. Скорей всего высоте шрифта, но ведь есть ещё межстрочный интервал.
Задача
Сделать фон элемента вровень с нижней границей наружного блока. Конкретно мне это понадобилось для нового оформления рекламной строчки (см. в самом верху страницы), если ещё точней — для фона пригласительного текста.
Решение
Боюсь, что решение моё неоптимальное и может неправильное, но до красивого и правильного решения мне додуматься не удалось. Скорей всего это можно назвать хаком, а хаки в CSS и прочих стандартах мне очень не нравятся. Может опытные читатели подскажут, каким образом сделать фон у элемента высотой точно в строку?
Выяснил, что вертикальный внутренний отступ (padding) хоть и не влияет на строчные элементы геометрически, но зато фон под него подстраивается. Возможно, что это только в FireFox, я в спецификации CSS с наскока не нашёл ничего о поведении padding со строчными элементами.
Спасти вашу технику от скачков напряжения, а соответственно от поломок и более раннего выхода из строя, поможет стабилизатор напряжения, приобрести который вы сможете в интернет магазине in-green.com.ua.
Но как точно рассчитать нужное значение? Чтобы фон не выходил за нижнюю границу строки и внешнего блока. Особо никак не рассчитаешь. Поэтому я использовал свойство overglov-x из CSS3 для внешнего блока и поставил его в значение hidden.
Пожалуйста, проверьте в своих браузерах, везде работает как надо? Светло-серенький блок приглашения должен быть точно вровень с такой же серенькой полоской внешнего блока. Делаю скриншот в своём браузере:
Ну и, как уже говорил выше, был бы рад обсудить другие варианты решения. Не нравится мне моё, скажу честно. И вообще, кажется, я стал терять квалификацию в вёрстке, плаваю уже и в HTML и в CSS.
P.S. 1000 лет про вёрстку не писал ничего.
Комментарии
Комментирование этой статьи закрыто.
IE 8, FF 4, Chrome 10 (Win) – ОК.
Спасибо.
можно без paddig’a указать position: relative и bottom: -X(px/em) опять же нужно вычислять
или просто vertical-align: text-bottom;
С вычислением совсем фигня, а vertical-align пробовал до решения ещё, вообще абсолютно никакие значения не имеют эффекта.
хм, vertical-align как раз таки работает может ты не к тому элементу прописал?
Покажи пример.
Тормоз, а почему ты недолюбливаешь врапперы? Или я чего-то недопонимаю в очередной раз=) Т. е. я вижу только одно «железное», быстрое и простое решение в данном случае – обернуть строчный элемент еще в один див, которому и назначить фон.
Во-первых, оборачивать строчный элемент в блочный для фона очень и очень глупо (не говоря уж о том, что оно не сработает для конкретно моей задачи).
Во-вторых, не люблю вообще никакое оформление в HTML, всё должно быть в CSS. Исключения бывают, но очень редко.
Так что рекомендации говнокодить не принимаются :)
да с выравниванием по вертикале промашка 1 пиксель на твоём фоне не рассмотрел, хотя нашел другое решение
#daosinvite {line-height: normal;}
Неа, не работает. Ты как его нашёл, «решение» такое? :) Проверяя с моим остальным кодом, где hidden у контейнера стоит уже?
Ну не знаю =) Как-то очень давно была аналогичная задача, помню, сутки на нее убил, перетестив разные варианты.
Сейчас отрыл старый код, решил тогда проблему
display: inline-block;
плюс хак для IE
display: inline !important;
Ну и помимо этого еще строчек дцать быдлокода, разных отступов, предназначение которых я уже не вспомню, но на сколько понимаю, без них не работало. Поэтому теперь везде где только можно сую врапперы, это порождает меньшее кол-во говнокода, чем пытаться верстать правильно, а потом грузить верстку хаками под каждый браузер. Хотя вру, конечно. Сейчас я уже ничего не тестю в старье, портить код из-за 1-5% посетителей на старых браузерах, ну его нафиг.
Упс, вру! Вариант Jungle, действительно, отличный! Спасибо.
Бред какой.
Выдрал из контекста =) Имелось в виду, что при решении нетривиальных задач лучше сделать несколько оберток, чем верстать по спецификациям и потом гуглить хаки под каждый браузер.
Но да, согласен, бред. Теперь буду бить себя по рукам, если захочу быдлоповерстать.
*ушел читать w3.org
Правда непонятно, как отрегулировать всё ж вертикальные отступы тогда :) И, кстати, почитал в спецификации, normal, оказывается, умолчальное значение. У меня проблема была скорей всего из-за наследования.
Зачем хаки-то? Вполне можно и нужно верстать по стандартам без хаков вообще-то.
а попробуй убрать line-height и просто поставь display: inline-block;
т.к. отступы скорее всего для блочных объектов
Но что будет в IE всяких тогда?
Как-то аргументированно ответить у меня не получится, давно не верстал. Сегодня вот первый раз буду, за последние N месяцев (спасибо за пост, так бы верстал «по памяти», а теперь полезу освежать знания в документацию). Но ведь хаки не просто так появились. Старые браузеры, не всегда одинаково работающие во всех браузерах свойства и т. д. Согласись, если бы сверстал по документации – и все всегда работало бы как надо, то таких вопросов не возникало бы:
FF 4.0.1 – всё на месте.
а для IE оставь line-height и display: inline
вот IE меня убивает, а заказчики требуют поддержку IE7 (это баг на баге) =)
Отдельный CSS ему подсовывать что ли? Ну не, это слишком жирно будет :) Мне нравятся простые решения, которые просто работают во всех популярных браузерах и всё. В общем, оставил просто с line-height normal и всё. Вроде симпатично, отступы не нужны. Спасибо!
ну, я тоже так думаю
вообще нужно игнорить браузеры типа IE6-7 это мертвые браузеры, да и процент их стремится к нулю, я так думаю.
не за что =)
Opera 11, Chrome 11 – ОК.
Jungle: мертвые это да, а вот процент пока явно не ноль :(
По статистике li.ru:
Explorer 7 – 6.1%
Explorer 6 – 2.6%
Итого: 8.7% – пока рано игнорировать :(
www.liveinternet.ru/…
Я эти браузеры учитываю, но у меня такая особенность — я никогда не гонюсь за полной идентичностью отображения сайта в разных браузерах. То есть если в IE чего-то не так, но не особо уродливо, не разваливается — хрен с ним, пусть будет. То есть я сторонник изящной деградации, кстати, пришёл к этому задолго до того, как узнал про термин.
Но мне легко и просто — я никогда не верстал по макету от дизайнера, я сам себе дизайнер :) Кстати, давно не рисую макеты, начинаю сразу в HTML и CSS, а проект странички в голове постепенно отрисовывается.
@MrMozg ну так стремится же к нулю. Я вообще не понимаю людей, которые сидят под этими браузерами (IE6-7) у них что обновление не работает, им нравятся глюки и тормознутность проводников в интернет? Это как ездить на машине с неисправными тормозами =)))
Да устраивает их всё. Понять можно, по-моему, ты просто попробуй вылезти из шкуры технаря-верстальщика. Да им дела нет до всех этих заморочек, обычным людям. У них свои задачи, и часто они даже не представляют, что такое «браузер», у них есть просто значок интернета на «рабочем столе» и всё.
ну это понятно, но когда винда предлагает обновить браузер, то что останавливает или у них обновление отключено?
хотя, да, они не заморачиваются по этому поводу
поэтому нужно делать дизайн проще и тоже не заморачиваться как выглядит он у тех % обладателей IE6-7
Реакция пользователя, когда система чего-то предлагает: – «Ой, что это?!» Отмена…
Не все так просто. На работе есть комьютерный класс – там железо ничего кроме Win98 не потянет, соответственно и IE старый. Не IE пользуются только студенты, преподаватели разных кафедр никак не могут пользоваться нормальными браузерами – уже пытались приучить, не получается. Сайт не открывается в IE или не так открывается как нужно – «У вас интернет не работает».
@MrMozg это просто ужас Win98 о_О, я думал он давно уже в музее пылится
поэтому нужно игнорить IE6-7 какой смысл делать сайт для «школьников» т.е. это не наш контингент.