Я пытаюсь создать строку меню, которая будет состоять из серии значков и текста, расположенных горизонтально. Я использую неупорядоченный список в качестве контейнера, но у меня возникла проблема. Все пункты меню, которые не содержат текста, только пустой тег привязки с фоновым изображением, отлично отображаются в строке.
Однако всякий раз, когда я пытаюсь использовать текст вместо фонового изображения в качестве элемента меню, элемент текстового списка перемещается вниз. Вы можете увидеть этот пример на JSFiddle, не забудьте перенести каждый из элементов, чтобы увидеть, как ведет себя индикатор цвета фона: http://jsfiddle.net/pAfgm/6/.
Обратите внимание, что каждая из ссылок со значком глобуса (да, для этого примера я добавил ссылку из Facebook), выглядит красиво и аккуратно. Однако текст и его фоновый индикатор находятся далеко от выравнивания. Я вижу, что это касается FF 3.6, Opera 11, но не IE7! На этот раз у IE7 нет проблем с другими браузерами.
Может кто-нибудь показать мне, как я могу исправить эту проблему?
Спасибо за ваше время!