Комментарии на: Равномерный фон под текстом

От: oleg

oleg — Tue, 13 Dec 2011 15:22:47 +0000

меньше 1.2

От: oleg

oleg — Tue, 13 Dec 2011 15:22:14 +0000

Если размер шрифта, то нижняя строка наезжает на верхнюю. Как можно побороть ?

От: Елена

Елена — Sat, 12 Mar 2011 08:42:02 +0000

А как быть, если фон полупрозрачный?Если в примере поменять красный на скажем rgba(1,0,0,0.5), то появляются уродливые горизонтальные полосы из-за наложения полупрозрачности.

От: trendbender

trendbender — Fri, 15 Oct 2010 11:11:23 +0000

> как выяснилось, если для основного контейнера не указать left,отличный от 0, то начинаются баги в IE8. Почему – черт его знает. Для > IE 6-7 оптимально выдавать вариант с border слева. Проверил в IE6-7-8, Opera 9-10, FF 2-3, Safari 3-4 – работает.

> пример тут: http://vlad.flango.ru/fon-span/

по-моему хорошее решение, спасибо vlad43

От: Денис Гомес

Денис Гомес — Sun, 05 Sep 2010 20:48:07 +0000

Так или иначе варианты выглядят вполне не плохо. Сейчас бьюсь с проблемой :hover в варианте с графической подложкой.

От: warmrobot

warmrobot — Tue, 03 Aug 2010 08:27:26 +0000

Второе решение тоже не идеальное:
http://igorfrolov.info/s/i/temp/heading_outline.png

Перехлёст выносных элементов – такое точно не устроит ни одного дизайнера.

От: Del'ka

Del'ka — Fri, 16 Jul 2010 11:43:12 +0000

Начиная с FF 3.6 (Gecko 1.9.2) свойство moz-outline-offset больше не поддерживается, поэтому заменяем:
.uniform-bg {
background:red;
position:relative;
outline: red solid 0.3em;
-moz-outline-offset:-0.04em;
}
на
.uniform-bg {
background:red;
position:relative;
outline: red solid 0.3em;
}
@-moz-document url-prefix() {.uniform-bg {outline-offset:-0.04em;}}

От: vlad43

vlad43 — Wed, 17 Feb 2010 09:58:51 +0000

как выяснилось, если для основного контейнера не указать left,отличный от 0, то начинаются баги в IE8. Почему – черт его знает. Для IE 6-7 оптимально выдавать вариант с border слева. Проверил в IE6-7-8, Opera 9-10, FF 2-3, Safari 3-4 – работает.

пример тут: http://vlad.flango.ru/fon-span/

От: vlad43

vlad43 — Wed, 17 Feb 2010 08:01:30 +0000

Насчет последнего метода – “его можно немного упростить, убрав один слой и добавив левый border у контейнера”. Так вот, это дело начинает бажить в IE8, хотя в остальны все отлично

От: Bryan Watson

Bryan Watson — Tue, 16 Feb 2010 16:59:32 +0000

Very true, my solution was mainly to demonstrate that it can look uniform across all browsers.

Currently, without using some one-off javascript, there is no perfect solution to this issue.

When used in a practical application, you have to consider what’s more important for your specific project: Presentation or Accessibility

If accessibility is more important then presentation, then using any of the techniques listed probably wouldn’t be a wise choice in the first place.

When considering using semantic, clean code for purely presentation purposes, then my solution fits that need.