проблема высоты иконки css

Question

Я хочу использовать стандартный метод форматирования ссылок «Показать больше» на моих HTML-страницах.

В HTML я использую:

<span class="showMore">Show more details</span>

Тогда в css у меня есть:

.showMore {
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat 0px 0px;
}

.showMore:hover {
    color: #F5891D;
    cursor: pointer;
}

, где add.png - это шелковая иконка famfamfam размером 16x16. Я использую JavaScript для расширения некоторого раздела контента, используя событие onclick.

Это хорошо работает в Firefox 3.0.5, но в IE 7 последние несколько пикселей иконки обрезаются. Я ищу обходной путь. Использование высоты не работает на встроенных элементах, таких как <span/>. Добавление прозрачной границы устраняет проблему в IE7:

.showMore {
    border: 1px solid transparent;
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat 0px 0px;
}

Но IE6 не поддерживает прозрачность. Увеличение размера текста решает проблему, но я не хочу большого текста. line-height не работает. Кто-нибудь знает что-нибудь, что может помочь?

Answer 1

Я решил проблему. Я понятия не имею, почему, но использование no-repeat center left вместо no-repeat top left гарантирует, что IE не отрубит нижние 2px значка. Почему использование center вместо top должно привести к тому, что изображение будет выше, это странно, но это IE для вас ??

.showMore {
    color: #0E4B82;
    padding-left: 18px;
    background: url("images/icons/add.png") no-repeat center left;
}

.showMore:hover {
    color: #F5891D;
    cursor: pointer;
}

Answer 2

делает

display: block;
height: 16px;

Помогите исправить высоту пролета?