IE7 <li>bullet / number за пределами наведения

Question

Продолжение из другого поста здесь: IE7 li bullet или число, показанное вне div

В предыдущем посте элемент li вне div был исправлен, но теперь у меня есть еще одна ошибка IE7 с элементом hover. Так как элемент hover не может быть установлен через, как я могу это исправить?

P.S. Очевидно, у меня были некоторые проблемы с ошибкой hasLayout в IE, поэтому кто-то должен был дать хорошее объяснение, и это было бы полезно.

Опять все работает в Firefox и т. Д.

Скриншоты:

код:

#create_request ol {
    width: 339px;

}

#create_request li {
    display: list-item;
    line-height: 23px;
    background-color: #E3E3E3;
    list-style: decimal;
    list-style-position: inside;
    padding-left: 25px;
    padding-top: 5px;
}

#create_request li.alternate {
    background-color: white;

}

#create_left li:hover {
    width: 356px;
    background: url('/images/list_add.png') 100% 100% no-repeat;
    background-color: #B0B0B0;
    cursor: pointer;
}

Answer 1

К сожалению, это невозможно без добавления другого элемента в <li>.Неверное поведение list-style-position возникает в IE6 / 7, когда элемент <li> получает hasLayout .Вы хотите полностью избежать hasLayout на элементе.width является одним из триггеров hasLayout .

Я предлагаю поставить <span> в <li> (да, извините, если вы будете плакать)

<li><span>Item</span></li>

и измените стиль li:hover следующим образом

#create_left li:hover {
    background: #B0B0B0;
    cursor: pointer;
}
#create_left li:hover span {
    display: block;
    width: 356px;
    background: #B0B0B0 url('/images/list_add.png') 100% 100% no-repeat;
}

Таким образом, диапазон контролирует ширину <li>, не задавая hasLayout .Вам нужно только удалить padding-top: 5px; из CSS <li> и противодействовать ему с помощью line-height, в противном случае <span> не получит полную высоту.

Сделайте его, если необходимо, IE6 / 7.условная таблица стилей.

Answer 2

Я считаю, что вам нужно объявить "list-style-position" в правиле для вашего тега OL:

#create_request ol {
  list-style-position: inside;
}