php - 使用 IE7 时，垂直菜单中的 之间存在间隙

Question

<ul id="main">
  <li class="the-dropdown-link"><a href="#">Main Link</a>
    <ul id="dropdown">
      <li>sdfsdf</li>
      <li>sdfsdf</li>
    </ul>
 </li>
</ul>

ul#main{ margin:0; padding:0; list-style:none; float:right; width:100%;}
ul#main li.the-dropdown-link{float:left; width:140px; }
ul#main ul {position:absolute; display:none; padding:0;list-style:none;}
ul#main a{display:block;height:24px; width:140px;font-size: 14px; font-weight: 500; text-align: center; color: #ffffff; text-transform: uppercase; line-height: 26px;}

通过这个垂直下拉菜单，我在 <li> 之间找到了空隙在IE7中。通过研究，我发现 IE7 在 </li> 之间创建了空白和 <li> ，但是我正在使用 php 生成我的列表，因此不能将所有 <li>像大家推荐的一样在同一条线上。

我尝试将所有列表元素添加到一个变量中并使用:

$first_list = preg_replace('~>\s+<~', '><', $first_list);

去掉空格，然后回显它。

我不知道该怎么办。

Answer 1

您应该能够阻止 PHP 输出空格，这是最简单的解决方案。

否则，您可以简单地使用:

ul#main ul {
    font-size: 0
}

这将消除差距。

你必须将 font-size 设置回来，比如 ul#main ul li { font-size: 14px}。

我昨天成功回答了一个类似的问题，查看更多信息和演示:

• Negative margin causes border to disappear in IE7 (一定要看评论)