在Zurb基金会下拉菜单在IE浏览器
问题描述:
我试图让基础下拉菜单跨浏览器工作,但遇到的问题将所有版本的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>
答
基金会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版本上标准化。