问候朋友,
我需要一些帮助!我已经构建了一个地址查找器,您可以在其中输入邮政编码,然后“查找地址”按钮会触发模态窗口。然后,这个模态窗口获取给定的邮政编码并加载到适当的数据中......
当您尝试扩展地址列表时,问题就开始了:列表扩展然后在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浏览器错误的受害者。
答案 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; }
删除它,只是为了测试。如果这可以解决您的问题,那么:
或者,您可以保留上面的行,只需将其添加到您的CSS:
li.area, li.address { position: static } /* to fix IE7 */
这只会从受影响的position: relative
标签“删除” <li>
。