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

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

1 个答案: