2013-05-09 99 views
0

我試圖讓基礎下拉菜單跨瀏覽器工作,但遇到的問題將所有版本的IE瀏覽器(7-10,具體)。在Zurb基金會下拉菜單在IE瀏覽器

我已經實現了這裏描述的JS下拉菜單(http://foundation.zurb.com/docs/components/dropdown.html)作爲過濾菜單。它適用於Chrome和FF,但不適用於IE。

在IE中的控制檯沒有給我指示發生了什麼。我的猜測是它與IE緩存activeClass有關,所以下拉菜單永遠不會被新的絕對座標更新?我說不出來,我有點失落。

這裏是我的代碼和實時頁面的鏈接(http://lp-beta.myshopify.com/collections/all - 密碼是「堆」) -

<div class='row options-style'> 
    <ul class='large-block-grid-3'> 
    <li><a href="#" data-dropdown='brand-filters'>BY BRAND</a></li> 
    <li><a href="#" data-dropdown='percent-filters'>BY COCAO PERCENTAGE</a></li> 
    <li><a href="#" data-dropdown='flavor-filters'>BY FLAVOR PROFILE</a></li> 
    </ul> 
</div> 

<ul class='f-dropdown options' id='brand-filters' data-dropdown-content> 
    <li><div class='option-value'><a href='/collections/all'>All brands</a></div></li> 
    {% for product_vendor in shop.vendors %} 
    <li><div class='option-value'>{{product_vendor | link_to_vendor }}</div></li> 
    {% endfor %} 
</ul> 

<ul class='f-dropdown options' id='flavor-filters' data-dropdown-content data-option-key='filter'> 
    <li><a class='option-value' id='chocolatey' data-option-value='.chocolatey'>Chocolatey</a></li> 
    <li><a class='option-value' id='citrus' data-option-value='.citrus'>Citrus</a></li> 
    <li><a class='option-value' id='fruity' data-option-value='.fruity'>Fruity</a></li> 
    <li><a class='option-value' id='floral' data-option-value='.floral'>Floral</a></li> 
    <li><a class='option-value' id='earthy' data-option-value='.earthy'>Earthy</a></li> 
    <li><a class='option-value' id='nutty' data-option-value='.nutty'>Nutty</a></li> 
    <li><a class='option-value' id='spicy' data-option-value='.spicy'>Spicy</a></li> 
    <li><a class='option-value' id='creamy' data-option-value='.creamy'>Creamy</a></li> 
</ul> 

<ul class='f-dropdown options' id='percent-filters' data-dropdown-content data-option-key='filter'> 
    <li><a class='option-value' id='forty' data-option-value='.forty'> Below 40%</a></li> 
    <li><a class='option-value' id='sixty' data-option-value='.sixty'> 41% to 60%</a></li> 
    <li><a class='option-value' id='eighty' data-option-value='.eighty'> 61% to 80%</a></li> 
    <li><a class='option-value' id='hundred' data-option-value='.hundred'> Above 80%</a></li> 
</ul> 

回答

2

基金會4不支持IE 8及以下。 Foundation 3支持IE 8但不支持IE 7.檢查Foundation 3 IE 7修補程序的網站。

您的頁面有多個對jquery.js(1.7,1.9 ...)和zepto.js的引用。 Zepto.js不支持IE;你可以用jquery.js替換它;他們是兼容的。 如果可能,請嘗試在一個jQuery版本上標準化。