Css 为什么带边距的li元素会改变我在Firefox中悬停时的列布局？

在这个提琴上，每当我将光标悬停在第二列中的某个元素上时，Windows上的Firefox87就会开始在列表的两个呈现之间快速地来回切换

右下面板必须为~850px宽，才能复制错误

在Chrome或Edge下不会发生这种情况

当我评论规则时，问题就消失了

li {
  margin: 0.25em 0 0.5em;
}

---

有人能解释一下发生了什么吗？

当边距改变元素的高度时，该项目不再适合第一列

如果从每个li元素的顶部或底部删除边距，则不会发生这种情况，如下所示：

li {
  margin: 0.25em 0 0 0;
}

li {
  padding: 5px;
}

或

不知道为什么，但它发生在2列和3列中

我想我可以用填充物来解决这个问题，比如：

li {
  margin: 0.25em 0 0 0;
}

li {
  padding: 5px;
}

---

这样，元素高度保持不变，因为填充应用于li元素的内部，而不是像边距那样应用于外部。

边距改变元素高度，并且项目不再适合第一列时会发生这种情况

如果从每个li元素的顶部或底部删除边距，则不会发生这种情况，如下所示：

li {
  margin: 0.25em 0 0 0;
}

li {
  padding: 5px;
}

或

不知道为什么，但它发生在2列和3列中

我想我可以用填充物来解决这个问题，比如：

li {
  margin: 0.25em 0 0 0;
}

li {
  padding: 5px;
}

---

这样，元素高度保持不变，因为填充应用于li元素的内部，而不是像边距那样应用于外部。

都德，这是因为您更改了边框的高度和边距底部：悬停

一些浏览器会在你手上的某个特定点上改变布局，使用CSS，可能会变得像你这里的问题一样难看

如果将鼠标悬停在其中一个链接上，链接的高度会增加2px，因为边框底部宽度是3px而不是1px，并且整个列表元素也会增加2px。现在浏览器必须重新呈现列表的布局和元素的高度。而且 将边距底部从0.5em重置为-2px

这不会从页边距底部移除2px，而是将页边距底部设置为2px！可能有点混乱

保险商指数{ 柱：15em； } 李{ 保证金：0.25em 0.5em； } a[href]{ 文字装饰：下划线； 边框底部：3倍纯色透明； } a[href]：悬停{ 文字装饰：无； 边框底部：3倍实心； }

---

伙计，这是因为你改变了边框的高度和边距的底部：悬停

一些浏览器会在你手上的某个特定点上改变布局，使用CSS，可能会变得像你这里的问题一样难看

如果将鼠标悬停在其中一个链接上，链接的高度会增加2px，因为边框底部宽度是3px而不是1px，并且整个列表元素也会增加2px。现在浏览器必须重新呈现列表的布局和元素的高度。而且 将边距底部从0.5em重置为-2px

这不会从页边距底部移除2px，而是将页边距底部设置为2px！可能有点混乱

保险商指数{ 柱：15em； } 李{ 保证金：0.25em 0.5em； } a[href]{ 文字装饰：下划线； 边框底部：3倍纯色透明； } a[href]：悬停{ 文字装饰：无； 边框底部：3倍实心； }

---

在我这一方，同一版本不可复制。@Supersormer更改视口。在我这一方，同一版本不可复制。@Supersormer更改视口。是否存在只在Firefox中出现错误的原因？问得好。我已经很快地阅读了说明书，但找不到任何理由。也许其他人知道。我找到了一个可能的解决办法，并更新了我的帖子。我感到非常不安。这取决于高度——是否有足够的空间容纳扩展的边框。这是为什么这个bug只出现在Firefox上的原因吗？好问题。我已经很快地阅读了说明书，但找不到任何理由。也许其他人知道。我找到了一个可能的解决办法，并更新了我的帖子。我感到非常不安。这取决于高度——是否有足够的空间用于扩展边界。