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

使用此垂直下拉菜单，我在ie7中的<li>之间会出现间隙。做我的研究我发现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 （请务必查看评论）

Answer 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/

使用IE7时，垂直菜单中的<li>之间存在间隙</li>

2 个答案: