Стиль списка, дающий разный вид в разных браузерах

Question

Я не могу понять, почему мой стиль «list-style: disc» отличается от внешнего вида в разных браузерах. См. http://www.galadadatingandrelating.com/ под акварелью «Свяжитесь с нами» есть 3 элемента li. -

Теперь они показывают диск перед ними в Firefox, но в Chrome диск полностью слева.

Почему браузер Chrome показывает это неправильно?

Answer 1

Добавить list-style-position: inside; в <li> элементов:

.line-wrap ul li { 
    list-style-position: inside; 
} 

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

ul#one, ul#two { 
 
    text-align:center; 
 
} 
 
ul#two { 
 
    list-style-position: inside; 
 
}

<ul id="one"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>One</li> 
 
</ul> 
 
<ul id="two"> 
 
    <li>List</li> 
 
    <li>Number</li> 
 
    <li>Two</li> 
 
</ul>

из спецификации о inside:
Блок-маркер помещается в качестве первого встроенного блока в блок главного блока, перед содержимым элемента и перед любым: перед псевдоэлементами. В CSS 2.1 не указано точное расположение поля маркера.
https://www.w3.org/TR/CSS2/generate.html#propdef-list-style-position

Объяснение:
В Google Chrome значение по умолчанию list-style-position является outside:
На Mozilla Firefox тоже, кажется, Firefox интерпретирует это правило немного по-другому!