html - 框大小边框出现在悬停内容移动

Question

代码：

   <div class="block">

    </div>

div.block
{
   box-sizing: border-box;
}
div.block:hover
{
   border: 1px solid orange;
}

当使用 box-sizing 悬停块时，里面的内容正在移动，如何防止这种情况？

Answer 1

div.block {
   box-sizing: border-box;
   border: 1px solid [your bg color];

}
div.block:hover {
   border: 1px solid orange;
}

尝试这个 ：）

当您悬停时，它会添加一个边框。所以它会产生额外的像素。如果您为原始项目（此案例块）添加边框，则无需添加新像素，因为它们已经存在。

如下所述：border 1px solid transperparent 可以正常工作

Answer 2

如果您不关心旧的 IE 版本，最好尝试：

div.block:hover {
   box-shadow: 0 0 1px orange inset;
}

或使用以下

div.block {
   border: 1px solid transparent;
}
div.block:hover {
   border-color:orange;
}

Answer 3

添加填充，然后在悬停时删除等于边框像素。

div.block
{
   box-sizing: border-box;
   padding: 10px;
}
div.block:hover
{
   border: 1px solid orange;
   padding: 9px;
}