IE,溢出和消失列表项

时间:2011-02-21 15:47:42

标签: html css internet-explorer-8

问候朋友,

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

当您尝试扩展地址列表时,问题就开始了:列表扩展然后在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浏览器错误的受害者。

1 个答案:

答案 0 :(得分:2)

就像我在评论中所说,它在我的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>