IE, переполнение и исчезающие элементы списка

Question

Привет друзья,

Мне нужна помощь! Я создал искатель адресов, в котором вы вводите почтовый индекс, а затем кнопка «Найти адрес» вызывает модальное окно. Затем это модальное окно принимает заданный почтовый индекс и загружает соответствующие данные ...

Проблемы начинаются при попытке расширить список адресов: список расширяется, а затем исчезает в IE8. Работает в ФФ.

Рабочий пример: 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.Я предполагаю, что у вас есть IE8 в режиме IE7, где возникает описанная вами проблема.

Удалите position: relative из тегов li внутри <ul class="addresslist">.

У вас есть в core.css:

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

Удалите это, просто чтобы проверить.Если это решит вашу проблему, то:

• Пожалуйста, предоставьте ссылку на именованную «ошибку пробела в списке IE», чтобы я мог предложить, что делать дальше (например, какие версии IEвстречается ли указанная ошибка?).

В качестве альтернативы, вы можете сохранить вышеуказанную строку и просто добавить ее в свой CSS:

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

Это будет "удалить " position: relative только из поврежденных тегов <li>.