图像链接高度无法在 Firefox 中正确呈现

Question

我在使用内容滑块时遇到了一些问题。我正在使用 jQuery.Cycle 插件，并设置了所有代码以使滑块与自定义寻呼机一起使用。但是，我遇到了 HTML 问题。在 IE 8 中查看时，分页器按钮工作正常，您可以单击下一个、上一个，然后单击分页器中的图像按钮以移动到特定幻灯片。在 FireFox 中查看时，整个图像不可点击！只有每个图像的底行像素会激活可点击区域。

您可以在 [removed] 查看所有相关代码，但我将在此处突出显示最相关的部分：

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;
}