цвет фона списка облажался в IE7

Question

Я создал несколько неупорядоченных списков HTML и их заголовок, чтобы они выглядели так в Firefox:

альтернативный текст http://img24.imageshack.us/img24/711/screenshot001nij.png

К сожалению, в IE7 они выглядят так:

альтернативный текст http://img11.imageshack.us/img11/8343/screenshot002e.png

Соответствующий HTML является

<div class="list-column">
    <h4>Types de pêche</h4>
    <ul>
        <li>Pêche en lac</li>
        <li>Pêche en Rivière</li>
    </ul>
</div>

И CSS это:

.list-column {
  float: left;
  margin-right: 20px;
  width: 20em;
}

div.list-column h4 {
  background-color: #FDD041;
  padding: 5px !important;
}

ul li {
  background-image: url(images/arrow.gif);
  background-position: 0 11px;
  background-repeat: no-repeat;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 6px;
  margin-left: -20px;
  margin-top: 2px;
  padding: 2px 0 2px 18px;
}

Я подозреваю, что тот факт, что div, содержащий список, перемещается влево, вероятно, является причиной моих проблем, но я не уверен, как обойти плохое отображение в IE7?

Обновление: Я попытался добавить свойство «zoom: 1» к элементам «ul», чтобы посмотреть, решит ли проблема с заданием элементов «layout» в IE, но это не помогло.

Проблема определенно не связана с закругленными углами. Я временно отключил их, но в IE ничего не изменилось (кроме появления углов).

Спасибо, Дон

Answer 1

IE и другие браузеры имеют другую таблицу стилей по умолчанию.

В IE отступы списка элементов, поместив 'margin-left' на

Answer 2

Я думаю, что это тот случай, когда IE-7 автоматически зависел от самый простой способ отладки - это установить IE-8; переключиться в совместимый режим ie-7. затем запустите инструменты разработчика из меню инструментов

Затем можно проверить отдельные элементы и проверить, применяются ли скрытые отступы или поля

Answer 3

Я думаю, что это может зависеть от различных отступов по умолчанию на ie и firefox. Попробуйте использовать в своем коде файл reset.css, если вы этого еще не сделали.

P.s. в ie8 у вас есть инструменты разработчика, которые похожи на firebug. Попробуйте использовать их и посмотрите, не можете ли вы понять проблему ...

Answer 4

Распространенным решением для этого является установка ширины элемента. Это сделает IE все внутри границ этой ширины.