CSS: фон в строчных элементах

08.05.2011

Если вы попробуете прописать значение background у строчного элемента (a, span, b и т. п.), то высота фона будет соответствовать… а честно говоря даже не знаю чему. Скорей всего высоте шрифта, но ведь есть ещё межстрочный интервал.

Задача

Сделать фон элемента вровень с нижней границей наружного блока. Конкретно мне это понадобилось для нового оформления рекламной строчки (см. в самом верху страницы), если ещё точней — для фона пригласительного текста.

Решение

Боюсь, что решение моё неоптимальное и может неправильное, но до красивого и правильного решения мне додуматься не удалось. Скорей всего это можно назвать хаком, а хаки в CSS и прочих стандартах мне очень не нравятся. Может опытные читатели подскажут, каким образом сделать фон у элемента высотой точно в строку?

Выяснил, что вертикальный внутренний отступ (padding) хоть и не влияет на строчные элементы геометрически, но зато фон под него подстраивается. Возможно, что это только в FireFox, я в спецификации CSS с наскока не нашёл ничего о поведении padding со строчными элементами.

Спасти вашу технику от скачков напряжения, а соответственно от поломок и более раннего выхода из строя, поможет стабилизатор напряжения, приобрести который вы сможете в интернет магазине in-green.com.ua.

Но как точно рассчитать нужное значение? Чтобы фон не выходил за нижнюю границу строки и внешнего блока. Особо никак не рассчитаешь. Поэтому я использовал свойство overglov-x из CSS3 для внешнего блока и поставил его в значение hidden.

Пожалуйста, проверьте в своих браузерах, везде работает как надо? Светло-серенький блок приглашения должен быть точно вровень с такой же серенькой полоской внешнего блока. Делаю скриншот в своём браузере:

Так оно должно быть

Ну и, как уже говорил выше, был бы рад обсудить другие варианты решения. Не нравится мне моё, скажу честно. И вообще, кажется, я стал терять квалификацию в вёрстке, плаваю уже и в HTML и в CSS.

P.S. 1000 лет про вёрстку не писал ничего.

Комментарии

  1. # Karden: 

    IE 8, FF 4, Chrome 10 (Win) – ОК.

  2. # Тормоз

    Спасибо.

  3. # Jungle

    можно без paddig’a указать position: relative и bottom: -X(px/em) опять же нужно вычислять

    или просто vertical-align: text-bottom;

  4. # Тормоз

    С вычислением совсем фигня, а vertical-align пробовал до решения ещё, вообще абсолютно никакие значения не имеют эффекта.

  5. # Jungle

    хм, vertical-align как раз таки работает может ты не к тому элементу прописал?

  6. # Тормоз

    Покажи пример.

  7. # tulvit

    Тормоз, а почему ты недолюбливаешь врапперы? Или я чего-то недопонимаю в очередной раз=) Т. е. я вижу только одно «железное», быстрое и простое решение в данном случае – обернуть строчный элемент еще в один див, которому и назначить фон.

  8. # Тормоз

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

    Во-вторых, не люблю вообще никакое оформление в HTML, всё должно быть в CSS. Исключения бывают, но очень редко.

    Так что рекомендации говнокодить не принимаются :)

  9. # Jungle

    да с выравниванием по вертикале промашка 1 пиксель на твоём фоне не рассмотрел, хотя нашел другое решение

    #daosinvite {line-height: normal;}

  10. # Тормоз

    Неа, не работает. Ты как его нашёл, «решение» такое? :) Проверяя с моим остальным кодом, где hidden у контейнера стоит уже?

  11. # tulvit

    Ну не знаю =) Как-то очень давно была аналогичная задача, помню, сутки на нее убил, перетестив разные варианты.

    Сейчас отрыл старый код, решил тогда проблему
    display: inline-block;
    плюс хак для IE
    display: inline !important;

    Ну и помимо этого еще строчек дцать быдлокода, разных отступов, предназначение которых я уже не вспомню, но на сколько понимаю, без них не работало. Поэтому теперь везде где только можно сую врапперы, это порождает меньшее кол-во говнокода, чем пытаться верстать правильно, а потом грузить верстку хаками под каждый браузер. Хотя вру, конечно. Сейчас я уже ничего не тестю в старье, портить код из-за 1-5% посетителей на старых браузерах, ну его нафиг.

  12. # Тормоз

    Упс, вру! Вариант Jungle, действительно, отличный! Спасибо.

    tulvit: Поэтому теперь везде где только можно сую врапперы, это порождает меньшее кол-во говнокода, чем пытаться верстать правильно…

    Бред какой.

  13. # tulvit

    Выдрал из контекста =) Имелось в виду, что при решении нетривиальных задач лучше сделать несколько оберток, чем верстать по спецификациям и потом гуглить хаки под каждый браузер.

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

    *ушел читать w3.org

  14. # Тормоз

    Правда непонятно, как отрегулировать всё ж вертикальные отступы тогда :) И, кстати, почитал в спецификации, normal, оказывается, умолчальное значение. У меня проблема была скорей всего из-за наследования.

    чем верстать по спецификациям и потом гуглить хаки под каждый браузер…

    Зачем хаки-то? Вполне можно и нужно верстать по стандартам без хаков вообще-то.

  15. # Jungle

    а попробуй убрать line-height и просто поставь display: inline-block;

    т.к. отступы скорее всего для блочных объектов

  16. # Тормоз

    Но что будет в IE всяких тогда?

  17. # tulvit

    Тормоз: Зачем хаки-то? Вполне можно и нужно верстать по стандартам без хаков вообще-то.

    Как-то аргументированно ответить у меня не получится, давно не верстал. Сегодня вот первый раз буду, за последние N месяцев (спасибо за пост, так бы верстал «по памяти», а теперь полезу освежать знания в документацию). Но ведь хаки не просто так появились. Старые браузеры, не всегда одинаково работающие во всех браузерах свойства и т. д. Согласись, если бы сверстал по документации – и все всегда работало бы как надо, то таких вопросов не возникало бы:

    Пожалуйста, проверьте в своих браузерах, везде работает как надо?

  18. # Бутылк.Ус

    FF 4.0.1 – всё на месте.

  19. # Jungle

    а для IE оставь line-height и display: inline

    вот IE меня убивает, а заказчики требуют поддержку IE7 (это баг на баге) =)

  20. # Тормоз

    Отдельный CSS ему подсовывать что ли? Ну не, это слишком жирно будет :) Мне нравятся простые решения, которые просто работают во всех популярных браузерах и всё. В общем, оставил просто с line-height normal и всё. Вроде симпатично, отступы не нужны. Спасибо!

  21. # Jungle

    ну, я тоже так думаю
    вообще нужно игнорить браузеры типа IE6-7 это мертвые браузеры, да и процент их стремится к нулю, я так думаю.

    не за что =)

  22. # MrMozg

    Opera 11, Chrome 11 – ОК.
    Jungle: мертвые это да, а вот процент пока явно не ноль :(
    По статистике li.ru:
    Explorer 7 – 6.1%
    Explorer 6 – 2.6%
    Итого: 8.7% – пока рано игнорировать :(
    www.liveinternet.ru/…

  23. # Тормоз

    Я эти браузеры учитываю, но у меня такая особенность — я никогда не гонюсь за полной идентичностью отображения сайта в разных браузерах. То есть если в IE чего-то не так, но не особо уродливо, не разваливается — хрен с ним, пусть будет. То есть я сторонник изящной деградации, кстати, пришёл к этому задолго до того, как узнал про термин.

    Но мне легко и просто — я никогда не верстал по макету от дизайнера, я сам себе дизайнер :) Кстати, давно не рисую макеты, начинаю сразу в HTML и CSS, а проект странички в голове постепенно отрисовывается.

  24. # Jungle

    @MrMozg ну так стремится же к нулю. Я вообще не понимаю людей, которые сидят под этими браузерами (IE6-7) у них что обновление не работает, им нравятся глюки и тормознутность проводников в интернет? Это как ездить на машине с неисправными тормозами =)))

  25. # Тормоз

    Да устраивает их всё. Понять можно, по-моему, ты просто попробуй вылезти из шкуры технаря-верстальщика. Да им дела нет до всех этих заморочек, обычным людям. У них свои задачи, и часто они даже не представляют, что такое «браузер», у них есть просто значок интернета на «рабочем столе» и всё.

  26. # Jungle

    ну это понятно, но когда винда предлагает обновить браузер, то что останавливает или у них обновление отключено?

    хотя, да, они не заморачиваются по этому поводу

    поэтому нужно делать дизайн проще и тоже не заморачиваться как выглядит он у тех % обладателей IE6-7

  27. # Тормоз

    Реакция пользователя, когда система чего-то предлагает: – «Ой, что это?!» Отмена…

  28. # MrMozg

    Jungle: ну так стремится же к нулю. Я вообще не понимаю людей, которые сидят под этими браузерами (IE6-7) у них что обновление не работает, им нравятся глюки и тормознутность проводников в интернет? Это как ездить на машине с неисправными тормозами =)))

    Не все так просто. На работе есть комьютерный класс – там железо ничего кроме Win98 не потянет, соответственно и IE старый. Не IE пользуются только студенты, преподаватели разных кафедр никак не могут пользоваться нормальными браузерами – уже пытались приучить, не получается. Сайт не открывается в IE или не так открывается как нужно – «У вас интернет не работает».

  29. # Jungle

    @MrMozg это просто ужас Win98 о_О, я думал он давно уже в музее пылится

    поэтому нужно игнорить IE6-7 какой смысл делать сайт для «школьников» т.е. это не наш контингент.

Комментирование этой статьи закрыто.

Интересное Покупки ТехникаРазное Отдых Статьи Строительство Услуги Общество Хобби Культура Советы Уют