Question

问候朋友，

我需要一些帮助！我已经构建了一个地址查找器，您可以在其中输入邮政编码，然后“查找地址”按钮会触发模态窗口。然后，这个模态窗口获取给定的邮政编码并加载到适当的数据中......

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

一个工作示例位于：http://www.equanet.co.uk/apply
尝试使用邮政编码： 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>

CSS是：


.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浏览器错误的受害者。

Answer 1

就像我在评论中所说，它在我的IE8中运行良好。我假设你在某种程度上以IE7模式获得IE8，你所描述的问题就出现了。

从position: relative内的li标记中删除<ul class="addresslist">。

您拥有core.css：

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

删除它，只是为了测试。如果这可以解决您的问题，那么：

请提供指向“IE list white-space bug”的参考链接，以便我可以建议下一步做什么（例如，命名错误发生在IE的哪个版本？）。

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

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

这只会从受影响的position: relative标签“删除” <li>。

IE，溢出和消失列表项

1 个答案: