Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав.

Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста.

В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное позиционирование.

Задачи, с которыми я сталкивался в вёрстке, требуют гораздо более эффективного решения. Вот эти задачи на примере создания ссылки-кнопки:

1. Ссылка должна быть «инлайновая», т. е. чтобы можно было поместить в строке.
2. При отключенных картинках в браузере вместо кнопки должна быть надпись-ссылка.
3. У кнопки должен работать «ховер» — при наведении мышкой, картинка должна меняться.

Метод Селецкого (Seleckis’ Method)

Фактически тот же Pixy’s method, только:

1. используется строчный блок (inline-block),
2. <span> помещается не после текста, а перед,
3. не <span> налезает на текст, а текст подлезает под <span>.

Ну а в качестве реализации «ховера» выступает обычный CSS-спрайт.

Итак HTML:

Seleckis

CSS:

.seleckis {
	/* только для FF2 */
	display: -moz-inline-box;
	-moz-box-orient: vertical;

	/* Для остальных */
	display: inline-block;

	line-height: 20px;
	text-align: center;
}
.seleckis span {
	display: block;
	position: relative;
	margin-bottom: -20px;
}
.seleckis,
.seleckis span {
	height: 20px;
	width: 74px;
	background-image: url(seleckis.gif) no-repeat top left;
}
a.seleckis:hover,
a.seleckis:hover span {
	background-position: bottom left;
}

Как видите, в этом коде сам блок становится строчно-блочным, а для FF2 срабатывает свойство «-moz-inline-box», что придаёт ссылке фактически такие же свойства. «-moz-box-orient: vertical» понадобится в том случае, если внутри блока вам нужно поместить содержимое в несколько строк.

Также, хочу отметить, что для элемента мы определяем относительное позиционирование и добавляем отрицательный нижний отступ размером с высоту кнопки, чтобы текст «подлез» под <span> с картинкой. Кстати, картинка спрайта прописывается как ссылке, так и спану. Мало ли что…

Если будут баги, пишите попробуем решить. А так, в моём случае работает в Internet Explorer 6, 7 и 8, Firefox 2 и 3, Opera, Safari, Chrome.

Качем пример.