Html 即溢出和消失列表项

朋友们，您好

我需要帮助！我已经建立了一个地址查找器，您可以在其中输入邮政编码，然后“查找地址”按钮会触发一个模式窗口。然后，此模式窗口采用给定的邮政编码并加载相应的数据

当您尝试扩展地址列表时，问题就开始了：列表会扩展，然后在IE8中消失。它在FF中工作

工作示例位于：
尝试使用邮政编码：M24 2NN

生成内容的HTML为：

<div class="addressFinder" style="position: fixed; top: 251px; left: 252px;">
  <h5><input id="closeBut" value="X" type="button"> Address finder</h5>
  <ul class="addresslist">
    <li class="area priv open"><span>Hereford Way, Middleton, MANCHESTER, Lancashire, M24 2NN</span>
      <ul style="display: block;" class="addresses">
        <li class="address" index="0" id="addr_0">< span>47</span></li>
        <li class="address" index="1" id="addr_1"><span>49</span></li>
        <li class="address" index="2" id="addr_2"><span>51</span></li>
        <li class="address" index="3" id="addr_3"><span>53</span></li>
        <li class="address" index="4" id="addr_4"><span>54</span></li>
        <li class="address" index="5" id="addr_5"><span>55</span></li>
        and so on...
      </ul>
    </li>
    <li class="area org"><span>Hereford Way, Middleton, MANCHESTER, Lancashire, M24 2NN</span>
      <ul style="display: none;" class="addresses">
        <li class="address" index="49" id="addr_49"><span>Bellinso, 98</span></li>
      </ul>
    </li>
</ul>
</div>

.addressFinder { position: absolute; z-index: 999; display: block; width: 60%; padding: 0.5em; margin: 0; background: #DDD; text-align: left; }
.addressFinder h5 { margin: 0; font-size: 1.25em; line-height: 2; }
.addressFinder ul { list-style: none; marging: 0; padding: 0; }
.addressFinder ul.addresslist { height: 20em !important; clear: both; overflow-y: scroll; margin: 0; background: #EEE; }
.addressFinder ul.addresslist ul { height: auto; margin: 0 0 0 1em; padding: 0; }

.addressFinder .addresslist span { display: block; cursor: pointer; line-height: 1.5; }
.addressFinder .addresslist span:hover { text-decoration: underline; }
.addressFinder #closeBut { float: right; margin-top: 0.2em; }
.addressFinder .priv, .addressFinder .priv li { list-style-image: url(/ui/icons/house.png); }
.addressFinder .org { list-style-image: url(/ui/icons/building.png); }
.addressFinder .priv li { list-style: none; }

---

我不确定这是我的CSS有问题还是我是geniune浏览器bug的受害者。

就像我在评论中说的，它在我的IE8中工作得很好。我在这里假设你的IE8处于IE7模式，你描述的问题就是在这里发生的

从

内的

li

标记中删除

位置：相对

您的
核心.css中有：

li { position: relative; /* For IE list white-space bug */ padding-left: 0.25em; }

去掉那个，只是为了测试一下。如果这解决了您的问题，那么：


请提供一个名为“IE list white space bug”的参考链接，以便我可以建议下一步做什么（例如，命名的bug出现在哪个版本的IE中？）

或者，您可以保留上述行，只需将其添加到CSS中：

li.area, li.address { position: static } /* to fix IE7 */

这将仅从受影响的
标记中“删除”
位置：relative
。
在IE8中工作正常。你是指IE7还是IE8的[IE7]兼容模式？那里不行，我用的是IE8。当我点击展开时，私人或组织列表中各自的内容消失。当内容展开时，垂直滚动条变为活动状态，但似乎不会向任何方向移动列表。我在几个不同的地方使用地址查找器；一个页面在中使用，另一个不使用。它似乎没有任何效果。太棒了！名单不再消失。非常感谢。但滚动条似乎没有按预期移动列表，列表项现在被冻结在原地。我明白了。它仍然在咬你的屁股。你还需要从
中删除
position:relative
。你可以用和以前类似的方法来做。看看我的最新答案。先生，谢谢你救了我！我今天太笨了。已经吸取了教训。去喝一杯当之无愧的好东西吧。。。