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

От: 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.

От: Сергей Чикуенок

Сергей Чикуенок — Tue, 16 Feb 2010 16:42:06 +0000

Bryan, there are two problems with your solution:

it requires you to know where exactly to put a line break (e.g. preformat header before posting);
it's not a “bulletproof” solution: if user decides to shrink down window size or increase font size, he receives very weird looking header with some words missing:

От: Bryan Watson

Bryan Watson — Tue, 16 Feb 2010 16:26:44 +0000

Sorry, I don’t speak Russian, but here is my rough translation:

Жаль, я не говорю на русском языке, но вот - мой грубый перевод:

Эта статья заинтриговала меня, чтобы создать более чистое решение.

В то время как мое решение воздействует на все браузеры, Вы действительно должны приспособить второстепенное положение, таким образом это измеряет должным образом.

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

Кроме того, высота заголовка включена, так типографский поток последователен.

Вы можете рассмотреть мой демонстрационный пример здесь:
http: // http://www.bryanwatson.ca/Misc/Block-Heading.html

От: mozgolom

mozgolom — Fri, 22 Jan 2010 18:56:48 +0000

По мне дак лучше заголовки вообще с прозрачным фоном делать. Так приятнее и удобнее.

От: denisx

denisx — Fri, 22 Jan 2010 07:52:34 +0000

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

сижу, борюсь с хромом

От: Сергей Чикуенок

Сергей Чикуенок — Thu, 21 Jan 2010 14:13:22 +0000

uggallery, а чем способ от Романа тяжелее «психически здорового» выделения каждого слова span’ом?

От: uggallery

uggallery — Thu, 21 Jan 2010 13:31:43 +0000

Для многих, лучшим решением будет ручное разбиение фразы на строки при помощи span-ов c padding-ом. Самый психически здоровый способ, при условии, что текст не часто меняется и т.д.