Диск слева от элемента списка отображается внизу

Question

Скриншот происходящего:

Это просто элемент списка в списке с заниженным порядком, это происходит в IE7 и больше нигде.

<ul>
  <li>Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li>
</ul>

.fancybox-entry.computer-policy li {
    float:none;
    width:100%;
    list-style-type:disc;
    margin-bottom:10px;
}

.fancybox-entry.computer-policy ul + p {
    margin-bottom:20px;
}

.fancybox-entry.computer-policy ul {
    margin:5px 0 10px 25px;
}

Любая помощь в том, почему он это делает, и исправление приветствуется.

Answer 1

Похоже, что свойство CSS width вызывает hasLayout для элемента li в IE7. Сначала попытайтесь удалить объявление width:100%;, чтобы убедиться, что пуля появляется в правильном месте. Если вы не можете обойтись без свойства width, вы можете использовать position: relative; и vertical-align: top;, чтобы переместить пулю обратно на место, как указано на http://www.gunlaug.no/tos/moa_26.html.

Обратите внимание, что код на этой странице использует хаки для таргетинга IE6 и IE7. Вместо этого я рекомендую использовать условные комментарии, например:

<!--[if IE 7]>
  <style type="text/css" media="screen">
    /* IE7-specific CSS here */
  </style>
<![endif]-->

Answer 2

Моя репутация все еще слишком низка, чтобы комментировать, иначе я бы добавил это к ответу peterjmag. (Может быть, он может включить это ...)

Свойство width является виновником, но я бы предложил другое изменение. Чтобы убедиться, что ваши элементы списка занимают всю ширину в IE7, используйте вместо этого «width: auto». Это придаст вам такой же вид, и ваши точки пули займут свое место. Я обнаружил, что «vertical-align: top / text-top» выдвигает точки маркера чуть севернее того места, где я их хотел бы.

Если у вас нет условных классов или таблицы стилей IE, просто используйте «* width: auto» для нацеливания на IE7.