Отступы элементов списка некорректны в IE, исправлены в Firefox, Safari и Chrome

Question

Что-то не так с моим CSS-кодом для списка.Отступы второй (и последующих) строк элементов списка некорректны в IE, но хорошо в других браузерах.См .: http://jsfiddle.net/nXYee/

Есть идеи?

IE8 дает такой результат:

Chrome, Safari и FF дают этот результат:

Answer 1

Это происходит потому, что вы поместили маркер в элемент списка (list-style-position:inside;), а браузер контролирует пространство между маркером и контентом li, а не вы.Internet Explorer выделяет больше места между маркером и содержимым, чем другие упомянутые вами браузеры.

Тот факт, что содержимое с отступами правильно выравнивается в Chrome / Safari / Firefox, объясняется тем, что все эти браузеры реализованы одинаково (или аналогично)расстояние между маркером и содержимым li, поэтому text-indent из 1em дает визуально непротиворечивый результат - , но на самом деле эта визуальная согласованность просто случайна .

(На самом деле, если вы внимательно посмотрите, вы заметите, что Firefox тоже немного отсутствует).

Если вы чувствуете, что необходимо отобразить маркер внутри элементов списка, вы можете использовать условный комментарий дляпередать разные значения text-indent и padding-left в IE (например, 1.5em / -1.5em), но это не работает в IE10, который не поддерживает условные комментарии.

Лично я бы оставилмаркеры за пределами пунктов списка, так как я думаю, вам будет гораздо проще получить последовательный результат.

Answer 2

Хм, похоже, что вы немного переосмыслили с точки зрения своего css со всеми этими позициями списка и отрицательным полем текста, я упростил его до следующего:

body {
  font-family:verdana;
  font-size:1.0em;
  width:500px;
}

ul {
  list-style-type:disc;
  padding-left:1em;
  margin-left:0px;
}​

Протестировал его на IE8,выглядит нормально.

http://jsfiddle.net/nXYee/1/

Answer 3

ul {
    list-style-position: outside !important;
}

исправлено У меня была похожая проблема

Answer 4

Я совершенно уверен, что это как-то связано с вашими стилями, в частности, с этой частью:

li {
    list-style-position:inside;
    ...
}
ul {
    text-indent:-1em;
    padding-left:1em;
    ...
}

Когда для list-style-position установлено значение inside, оно считается частью самого элемента списка, а когда элемент переворачивается, он переносится под маркер элемента. Затем он отступает из-за того, что задан левый отступ, но этого недостаточно, чтобы вывести его на нужный уровень. FF и Webkit могут использовать некоторые другие алгоритмы для определения позиции, или, возможно, 1em просто оценивает по-разному.

Я разветвил ваш jsfiddle и исправил стили в нем, чтобы список теперь отображался правильно: http://jsfiddle.net/8vxTw/3/