使用IE7时垂直菜单<li>之间有间隙答案

【问题标题】：There are gaps between <li> in a vertical menu when using IE7使用IE7时垂直菜单<li>之间有间隙
【发布时间】：2012-12-08 02:48:37
【问题描述】：

<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;}

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

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

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

去掉空格，然后回显它。

我不知道该怎么办。

【问题讨论】：

PHP 不会输出换行符，除非你告诉它。在某些地方它们是隐含的（比如在多行 HEREDOC 中），但 PHP 不只是在换行符中拍打，因为你会输出像 </li> 这样的结束标签。
你能澄清一下“我正在使用 php 生成我的列表，因此不能像大家推荐的那样将所有
放在同一行。”？

【解决方案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 （一定要检查 cmets）

【讨论】：

对于我的一个菜单，有人指出问题可能是因为行高大于我的字体，情况就是这样。但是，此解决方案修复了我的其他菜单中的空白。谢谢！

【解决方案2】：

这是在旧线程上，但如果有人遇到这个答案，正确的答案是：

li a {display:inline-block;}
li a {display:block;}

请注意，规则必须位于单独的块中。这也解决了 IE6 中的任何问题（但没有人再使用它了）。

有一天，当我遇到同样的问题时，我遇到了这个答案 - 我发现它贴在这里： http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

【讨论】：