Deerua about Coding -> CSS: outline такой outline — или делаем равномерный фон для текста

Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво… Что бы нам помочь, сделано свойство в CSS outline. О нём писал ранее, в статье о CSS debag’e.

Что же за зверь такой, этот outline — это внутренний бордер элемента, который не влияет на параметры длины элемента… Параметры такие же как у бордера

* { outline: #outline-color   outline-style outline-width px ­}

Для примера посмотрим на текст с разными свойствами:
 

Просто перенос	line-height: 90%	outline: 1px solid red	font-family: ’Calibri’
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО

Вывод, вопрос «можно решить»:

• через line-height, но когда у текста паддинг выглядит не очень
• через подстановку другого фонта, и опять паддинг
• с помощью outline. Казалось бы, задача решена, но есть одно но, или даже два — это старые ИЕ и тупая Опера, которая с этим свойством делает что хотит. Ещё иногда в ФФ при больших значениях падинга текста, и аутлайне, появляются артефакты, но они лечатся с помощью -moz-outline-offset (достаточно указать смещение на полпихеля)

Есть ещё одна проблема, фон картинкой будет выглядеть ужасТно. Что же делать с толпой недобраузеров и фоновой картинкой? Тут приходится хитрить. Для этого можно просто использовать 3 спана (position: relative;), 2 которых смещены друг от друга в разные стороны + кастомный фонт  

3 spans (left: -5px, 5px, -2.5px)	всё + line-height: 95%	background-image	background-attachment: fixed
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО
Тут всё круто	line-height делает прикольній декор	фон едет на следующей строке	fixed — правит это всё, но не для ИЕ6-7 (нужен expression)

Итого мы имеем:

.smaple, .sampleB {
	font-size: 18px­;
	font-family: 'Calibri', 'Trebuchet MS'­; 
	line-height: normal­;
}
.sample span {
	position: relative­;
	background: red­;
	color: white­;
	left: -5px­;
}
	.sample span span {left: 5px­;}
	.sample span span span {left: -2.5px­;}
	
.sampleB span {
	position: relative­;
	background: transparent url('bg.png') 0 0 fixed repeat­;
	left: -5px­;
}
	.sampleB span span {left: 5px­;}
	.sampleB span span span {left: -2.5px­;}

ps: по материалам chikuyonok.ru — Серёге привет!