Инспектор элементов Chrome не выравнивается с фактическим отображаемым элементом

Question

При просмотре следующей панели навигации с инспектором элементов Chrome выделенные элементы находятся не там, где отображаются фактические элементы.Почему именно это происходит?

https://codepen.io/bbbenji/pen/OodrJr (извините, слишком много кода для размещения здесь)

Это происходит только в Chrome как в Linux, так и в Windows.Firefox не имеет этой проблемы.

Too much code to post on Stackoverflow.
Codepen link provided above.

Answer 1

Я обнаружил, что # DIV_5 {display: -webkit-box;} (который вызывает проблему) должен быть некоторым предшественником display: flex ;.Он имеет префикс -webkit-, поэтому он предназначен только для браузеров Chrome.Я почти уверен, что он пытается использовать более старую спецификацию, но эта спецификация плохо работает с # DIV_6 {float: left;} и пусть даже инспектор глючит.