html - IE、溢出和消失的列表项

Question

问候 friend ，

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

当您尝试扩展地址列表时，麻烦就开始了:列表在 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 问题还是我成为了真正的浏览器错误的受害者。

Answer 1

正如我在评论中所说，它在我的 IE8 中运行良好。我在这里假设您以某种方式将 IE8 设置为 IE7 模式，这就是您描述的问题发生的地方。

删除 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”的引用链接，以便我建议下一步做什么(例如，指定的 bug 出现在哪个版本的 IE 中？)。

或者，您可以保留上面的行，并将其添加到您的 CSS 中:

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

这将“删除” position: relative来自受苦的人<li>标签。