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

Question

我在使用内容 slider 时遇到一些问题。我正在使用 jQuery.Cycle 插件，我已经设置了所有代码来让 slider 与自定义寻呼机一起工作。但是，我遇到了 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;
}