2

这是我的测试CSS：

.btn {
    display: block;
    height: 30px;
    width: 30px;
    background-color: red;
    position: relative;
}
.btn:hover {
    box-shadow: 0 0 0 1px black;
    text-shadow: 0 0 1px black;
}

应用于带有“btn”类的简单 div。使用 Firefox 的 28 Web Developer Console 我发现每次鼠标悬停在 div 上时都会执行 1 次重排，而当鼠标不再悬停在 div 上时会执行另一次重排。

如果我将“位置”属性从“相对”更改为“绝对”，则没有任何变化，如果我停用“文本阴影”或“框阴影”属性也不会改变。我发现不会触发两次重排的唯一方法是禁用“box-shadow”和“text-shadow”属性。

为什么会发生这种情况以及如何避免执行两次回流？

4

0 回答 0