Chrome 元素检查器与实际渲染的元素不对齐答案

【问题标题】：Chrome element inspector does not align with actual rendered elementChrome 元素检查器与实际渲染的元素不对齐
【发布时间】：2018-09-20 19:10:15
【问题描述】：

使用 Chrome 元素检查器查看以下导航栏时，突出显示的元素不是实际元素呈现的位置。为什么会发生这种情况？

https://codepen.io/bbbenji/pen/OodrJr（抱歉，这里写的代码太多）

这只发生在 Linux 和 Windows 上的 Chrome 中。 Firefox 没有这个问题。

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

【问题讨论】：

请问#DIV_5 { display: -webkit-box; 是什么？ } 应该怎么做？我找不到任何关于它的文档，它似乎是导致问题的原因。
@Mirous 这基本上是一些网站的代码。我还没有真正深入研究它。我不是要修复这个错误，只是想知道为什么会这样。
@Mirous display: -webkit-box; 是旧的 flexbox 语法

标签： html css google-chrome

【解决方案1】：

我发现#DIV_5 { display: -webkit-box; } （导致问题）应该是 display: flex; 的一些前身。它以 -webkit- 为前缀，因此它仅针对类似 Chrome 的浏览器。我很确定它试图使用一些较旧的规范，但该规范不适用于 #DIV_6 { float: left; } 甚至让检查员也有问题。

【讨论】：