添加边框 div 将其他 div 推开答案

【问题标题】：Adding border div pushing other divs out of box添加边框 div 将其他 div 推开
【发布时间】：2013-06-17 02:18:24
【问题描述】：

我在 div 的鼠标悬停时添加了一个 div 边框，但它会将其他 div 推出框外。

我有固定的高度和宽度，并且行有 4 个 div。最后有两行有 8 个 div 和固定高度。当我将鼠标悬停在任何 div 上时，它会将其下方的所有 div 推到主框之外。

我试图增加主盒子的高度，但它仍然推出。谁能帮我解决这个问题。

【问题讨论】：

【解决方案1】：

为所有 div 元素添加透明边框。然后在您的悬停事件中修改边框颜色/类型。这将使 div 保持原位。

【讨论】：

【解决方案2】：

边框被添加到宽度上，因此它使鼠标悬停的元素变大..这会推动其他 div..

这是正常行为..

您可以使用outline 代替边框，但它对 IE 的支持有限（IE8 及更高版本）..

【讨论】：

【解决方案3】：

边框被添加到元素的宽度。您可以尝试使用默认透明颜色（或适合您设计的颜色）的边框，并且在鼠标悬停时仅更改边框的颜色。当然，您必须从固定的高度和宽度中减去边框宽度。

【讨论】：

【解决方案4】：

将主 div 内的框设置为具有顶部/左侧值的绝对位置。

box1{
    position: absolute;
    left: 5px;
    top: 5px;
}

box2{
    position: absolute;
    left: 5px;
    top: 55px;
}

。 . .

【讨论】：