Chrome：悬停在 div 上移动相邻的 div：如何找到罪魁祸首？答案

【问题标题】：Chrome: Hovering over div moves adjacent div: How to find culprit?Chrome：悬停在 div 上移动相邻的 div：如何找到罪魁祸首？
【发布时间】：2014-10-14 23:46:02
【问题描述】：

在 Chrome 中，当我将鼠标悬停在某个 div 上时，相邻的 divs 会向左移动 1px。当我单击悬停在上面的div 时，相邻的divs 被移回原来的位置。

我想知道找出为什么会发生这种情况的最佳方法是什么？我已经在检查员中检查了相关的 divs 并且看不出它发生的任何原因。我缺少 Chrome 固有的东西吗？

Issue can be seen here by hovering over the "Filter" box in the Office column.

Fiddle that's throwing a few errors.

编辑：一旦我启用“显示绘制矩形”并将鼠标悬停在过滤器上，一个 div（以绿色显示）看起来就像它在红色箭头所在的位置创建了那个小间隙：

【问题讨论】：

FWIW，我在任何浏览器中都没有看到问题。您使用的是哪个版本的 Chrome？
Chrome 38.0.2125.101。确保页面加载时光标不在过滤器 div 上，然后将鼠标悬停在它上面。你会看到左边的 div 向左移动了 1px。
暂时没有人发表评论，但我想回应一下@trnelson 关于检查运行 no 扩展程序的页面的建议。我有很多奇怪的时刻，事情在不应该发生的情况下发生变化或变化，罪魁祸首通常是 Chrome 扩展程序注入了一些以某种方式干扰的 CSS。
我能够修复它，这是导致问题的 select2 的 CSS。与 div 的一个溢出有关：可见。感谢大家的帮助。
@Eric 您应该将其发布为您自己问题的答案。你不会得到赏金，但它至少会通知人们它已解决。

标签： html css google-chrome

【解决方案1】：

这是你的标签：

mytag {
    text-decoration: none;
    color: #5695F3;
}

在悬停时使用 display:inline-block 将不会在悬停您的元素时移动其他 div。

mytag:hover {
    color: #00287D;
    text-decoration: underline;
    display:inline-block;
    text-indent:0px;
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

发现是 select2 的 CSS 导致了问题。其中一个 div 的溢出：可见将其他 div 向外推。

【讨论】：