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

Question

使用Chrome元素检查器查看以下导航栏时，突出显示的元素不在呈现实际元素的位置。为什么会这样呢？

https://codepen.io/bbbenji/pen/OodrJr（对不起，太多代码无法在此处发布）

这仅在Linux和Windows上的Chrome中发生。 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; }，甚至使检查员也可以越野车。