0

我在此站点上使用名为 Cycle 的著名 JQuery 插件进行幻灯片放映： bybyweb.com/pbm

我有问题 - 在 Windows（所有最新的浏览器）上一切正常，但在 MAC 上（lion 10.7.5，一台测试机器；不知道客户端操作系统的版本-> 第二台测试机器......）有问题。 ..

问题：圆圈的底部被切掉了。 （幻灯片导航圈，你会看到它）。在 Firefox、Safari 和 Chrome 中测试！

相关的CSS：

#slider_nav {
    position:absolute;
    width:200px;
    height:27px;
    z-index:999;
    left:392px;
    top:455px;
    margin:0;
    padding:0;
}

.slideli{
    width:24px;
    height:27px;
    padding:0 24px 0 0;
    background-image:url(../images/gray-dot.png);
    background-repeat:no-repeat;
    cursor:pointer;
    background-position:top;
    margin:0;
}

.activeSlide {      
    width:24px;
    height:27px;
    text-decoration:none; 
    padding:0 24px 0 0;
    background-image:url(../images/white-dot.png);
    background-repeat:no-repeat;
    background-position:top;
    cursor:pointer;
    margin:0;
}

我设置了比需要更高的高度，删除了边距，填充......但没有成功 - 显然这里还有其他问题，我将不胜感激任何提示/建议。

4

1 回答 1

1

你的 JS 上有这一行：

return '<li'+s+' class="slideli"><a href="#">&nbsp;</a></li>';

这创建了这些行：

<li0 class="slideli">
<li1 class="slideli">
<li2 class="slideli">
<li3 class="slideli">
<li4 class="slideli">

这当然是非法的。

另外，我对slideli CSS 做了一些更改。它应该有帮助：

.slideli {
    background-image: url("../images/gray-dot.png");
    background-position: center top;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;          // Added
    height: 27px;
    margin-right: 5px;              // Added
    padding: 0;                     // Changed
    width: 24px;
}

修复它并告诉我们是否解决了问题

于 2013-08-19T12:27:47.907 回答