Высота ссылки на изображение неправильно отображается в Firefox

Question

У меня проблемы с ползунком контента.Я использую плагин jQuery.Cycle и настроил весь код, чтобы заставить слайдер работать с пользовательским пейджером.Однако у меня возникли проблемы с HTML.При просмотре в IE 8 кнопки пейджера работают нормально, вы можете нажать кнопку «Далее», «Предыдущий» и щелкнуть кнопки изображения в пейджере, чтобы перейти к определенному слайду.При просмотре в FireFox все изображение не кликабельно!Только нижняя строка пикселей для каждого изображения активирует активируемую область.

Вы можете просмотреть весь соответствующий код в [удалено], но я выделю наиболее важные части здесь:

CSS:

#slider_nav {
    text-align: center;
}

#slider_nav img {
    margin-top: 1px;
    margin-left: 10px;
    margin-right: 10px;
}

#slider_pager {
    display: inline;
}

HTML

<div id="sliderControls">
    <div class="content">
        <div id="slider_nav">
            <a href="#" id="slider_prev"><img src="/images/slider_arrow_l.png" alt="slider previous button" /></a>
            <div id="slider_pager">
                        <!--- Generated by JQCycle --->
                        <a href="#"><img src="/images/sliderActive.png" /></a>
                        <a href="#"><img src="/images/sliderInactive.png" /></a>
                        <!--- End generated code --->
            </div>
            <a href="#" id="slider_next"><img src="/images/slider_arrow_r.png" alt="slider next button" /></a>
        </div>
    </div>
</div>

Спасибо!

Answer 1

Проблема в том, что #slider располагается относительно и перекрывает sliderControls. Я смог исправить это, удалив нижнюю прокладку на #slider.

#slider {
   padding: 20px 20px 0 20px;
   height: 205px;
}