幻燈片圈底部砍掉的MAC

我使用衆所周知的jQuery插件稱爲週期對本網站的幻燈片： bybyweb.com/pbm 幻燈片圈底部砍掉的MAC

，我有問題 - 在Windows（所有最新的瀏覽器），一切工作正常，但在MAC （獅子10.7.5，一臺測試機器;不知道客戶機OS版本 - >第二臺測試機器...）出現問題...

問題：圓圈底部被切掉。（幻燈片導航圈，你會看到它）。經過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; 
}

我已高於所需的高度，去除利潤率，填充...但沒有成功 - 顯然別的東西是問題就在這裏，我將不勝感激任何提示/建議。

來源

2013-08-19 sinisake

你有你的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-19 12:27:47 Itay

謝謝！改變了CSS解決了問題。（無法更改jquery/js部分 - 幻燈片在這種情況下不起作用）。 – sinisake

問題是'li'元素是'inline display'，你的'width'和'height'樣式對他們不起作用。填充是用來使其適當的寬度。在Mac中呈現'padding'或'line-height'的方式可能有所不同，因此您的元素已被剪切。將其更改爲「內嵌塊顯示」可使「寬度」和「高度」正常工作。 – Itay

另外，謝謝你的解釋！ – sinisake

幻燈片圈底部砍掉的MAC

回答

相關問題