<h3> в <a>в <li>странное поведение Firefox

Question

У меня есть список результатов поиска, в который я положил h3 в пределах якоря в пределах li примерно так

<li>
  <a href="https://www.stackoverflow.com/">
    <h3>h3 within anchor within li</h3>
  </a>
</li>

Тесты:

• Chrome, safari и opera => нет проблем
• Firefox и Firefox dev Edition => странное поведение

См. Изображение ниже

Почему Firefox отображает приведенный выше код следующим образом?

Примечание:

стиль не применяется

Answer 1

Если вы поместите элемент с атрибутом display: block; по умолчанию: val (<h3>) внутри элемент с атрибутом display: list-item;: val ... так выглядит макет.

(Не говоря уже о теге <a>, который, по моему мнению, имеет display: inline; по умолчанию.

Вы можете избежать / улучшить, добавив css h3{display: inline;}, но это не семантический HTML. точка. (Элементы списка не должны содержать заголовков - или, по-другому: встроенные элементы)

Кстати, вот как я это вижу в Chrome версии 77.0.3865.90 (Официальная сборка) (64-разрядная версия) дляMac OS X 10.14.6: