Question

我在这个网站上使用着名的JQuery插件，名为Cycle for slideshow： bybyweb.com/pbm

我有问题 - 在Windows（所有最新的浏览器）都工作正常，但在MAC（狮子10.7.5，一台测试机器;不知道客户端OS版本 - ＆gt;第二台测试机器.. 。）有问题...

问题：圈子底部被砍掉。（幻灯片显示导航圈，你会看到它）。在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;
}

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

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

修正并告诉我们这是否解决了问题

幻灯片圈底部在MAC上切断

1 个答案: