Safari неправильно отображает элементы списка

Question

У меня есть неупорядоченный список, что-то вроде этого

<ul>
 <li>
  <div>filled with other stuff</div>
 </li>
 <li>
  <div>filled with other stuff</div>
 </li>
 <li>
  <div>filled with other stuff</div>
 </li>
</ul>

Когда я смотрю на список в Safari, список отображается неправильно, и когда я проверяю HTML, я получаю что-то вроде этого

<ul>
 <li>
  <div>filled with other stuff</div>
  <li>
    <div>filled with other stuff</div>
    <li>
     <div>filled with other stuff</div>
    </li>
  </li>
 </li> 
</ul>

Есть идеи, почему это происходит только в Safari?

Answer 1

Ваша разметка неверна.Вы не можете вкладывать li в li без ul в начале.

Если вы хотите сделать вложенный lis, вам нужно запустить новый ul

<ul>
<li>lorem
 <ul>
  <li>ipsum</li>
  <li>dolor</li>
 </ul>
</li>
</ul>

Лучше не использовать divв li, если вы можете избежать этого (что вы наверняка можете) - если вам нужен li, чтобы действовать как блок, добавьте display: block к вашему css.