Как я могу исправить, когда CSS отступ не работает во всех браузерах?

Question

Мне нужно сделать дизайн следующим образом:

   Total Maximum Daily Load, EPA

• Моделирование судьбы и переноса загрязнителей
• Разработка общей максимальной суточной нагрузки (TMDL)

Как вы видите, "Общая максимальная суточная нагрузка" должна быть согласована с точками маркировки "моделирование.." и "общая сумма".

необходимое выравнивание отображается в Internet Explorer и Firefox, но в Chrome это показано ниже

 Total Maximum Daily Load, EPA

• Моделирование судьбы и переноса загрязнителей
• Разработка общей максимальной суточной нагрузки (TMDL)

"Общая максимальная суточная нагрузка" не совпадает с "моделированием" и "общим" количеством пунктов маркера. Почему он работает в одном браузере, а не в другом? Как я могу сделать этот браузер отступа независимым.

Answer 1

Самое простое решение, вероятно, состоит в том, чтобы сделать первый текст элементом списка, но без маркера:

<ul>
<li style="list-style: none">Total Maximum Daily Load, EPA
<li>Modeling the Fate and Transport of Pollutants
<li>Total Maximum Daily Load (TMDL) Development
</ul>

Альтернативное решение состоит в том, чтобы удалить все поля и отступы от ul а также li (это различия браузера здесь вызывают проблему), а затем установите левое поле для ul и идентичный левый край в первом тексте. Обратите внимание, что это удаляет вертикальное поле по умолчанию из ul, так что вы можете добавить их, в дополнение к настройке значения левого поля. (Значение 1.3em или, возможно, это наименьшее безопасное значение, безопасное в том смысле, что в него будут помещаться маркеры списка.)

<style>
ul, li {
  margin: 0;
  padding: 0;
}
ul, .list-header {
  margin-left: 1.3em;
}
</style>
<div class="list-header">Total Maximum Daily Load, EPA</div>
<ul>
<li>Modeling the Fate and Transport of Pollutants
<li>Total Maximum Daily Load (TMDL) Development
</ul>