IE7动态菜单和空白

我正在开发一个小型脚本，它将格式化的HTML转换为动态菜单。这是为了让表单编写者在不知道太多JavaScript的情况下创建动态菜单。这个想法是，他们只会写语义标记，JavaScript代码将为他们制作菜单。IE7动态菜单和空白

您可以在this fiddle中查看演示。

基本上，它需要HTML，看起来像这样：

<ul data-menu-horizontal="true" data-menu-width="500px"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Blog</a></li> 
    <li><a href="index.html">News</a></li> 
    <li><a href="index.html">Code</a></li> 
    <li> 
     <ul data-menu-horizontal="true" datamenu-header="Sub-Menu 1" data-menu-width="500px"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="index.html">Computer Blog</a></li> 
     <li><a href="index.html">More News</a></li> 
     </ul> 
    </li>  
    <li> 
     <ul data-menu-vertical="true" data-menu-header="Sub-Menu 2" data-menu-width="500px"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="index.html">Computer Blog</a></li> 
     <li><a href="index.html">More News</a></li> 
     </ul> 
    </li> 
</ul>

......并把它转换成这样：

<ul id="13575820577141" class="menu-horizontal" style="width: 500px;"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="index.html">Blog</a></li> 
    <li><a href="index.html">News</a></li> 
    <li><a href="index.html">Code</a></li> 
    <li> 
      <h2 class="menu-horizontal-header">Sub-Menu 1</h2> 
     <ul id="13575820577142" class="menu-horizontal" style="display: none; position: absolute; width: 500px;"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="index.html">Computer Blog</a></li> 
     <li><a href="index.html">More News</a></li> 
     </ul> 
    </li>  
    <li> 
     <h2 class="menu-vertical-header">Sub-Menu 2</h2> 
     <ul id="13575820577143" class="menu-vertical" style="display: none; position: absolute; width: 500px;"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="index.html">Computer Blog</a></li> 
     <li><a href="index.html">More News</a></li> 
     </ul> 
    </li> 
</ul>

有jQuery的（开始于makeMenus()功能）的分配秀/隐藏功能到每个菜单ul和菜单标题（标记为h2）mouseover/mouseout显示/隐藏适当的子菜单。

显示/隐藏功能在我到目前为止测试过的所有浏览器中都很好用。问题是，在IE7中，只要遇到任何空格，即使在li元素之间，“鼠标悬停”功能也会中断。我不想简单地删除所有额外的空格，因为需要一些空格来“美化”菜单。

来源

2013-01-07 Vince Fedorchak

我不会打扰IE 7的。它已经很老了。它在2006年问世。请检查您网站的该版本的浏览器统计信息。我敢打赌，你没有从该版本获得很多流量。我通常会尝试支持当前版本和2个版本。对于IE来说，这意味着当前= IE10和2个版本后退= IE9和IE8。 –

2011年，IE 7被全世界4％的人使用（[source]（http://theie7countdown.com/））。正如@ Miguel-F所说的，最好的是支持当前的+2版本。所以，你不需要IE 7！ :) –

不幸的是，我的企业内部网使用IE7。当然，它们很快就会升级，但它仍然意味着很多使用IE7的客户端。 –

哈......你永远猜不出什么问题了。我需要在'ul'元素上设置背景颜色。我猜IE7并没有将透明背景看作元素框的一部分，至少就鼠标悬挂而言。现在我不得不为我的菜单元素选择明确的背景颜色。真是一拖！

感谢任何看过的人。希望这可以在未来帮助其他人。

来源

2013-01-09 01:59:42

是否使用'overflow：auto;'而不是提供背景色工作？ – Nick

不幸的是，但谢谢你的建议！ –

IE7动态菜单和空白

回答

相关问题