边框扩展div高度

Question

我在css中遇到了边界问题，它们被设置为隐藏在正常状态下，在悬停时设置为1 1px。其结果是：

​

​

在鼠标移动时，下一行被向下推1 1px。我尝试过添加box-sizing:border-box，但这并没有帮助。

.menu-sidebar {

    margin-top:25px;
}

.iconmenutest{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    vertical-align: middle;
    font-size: 3em;
    text-align: center;
    background-color:rgba(40,40,40,0.9);
    color:gray;
    border:hidden;
    cursor: pointer;
}

.iconmenutest:hover  {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background: rgba(40,40,40,0.3);
    border: 1px dotted gray;
}

下面是html：

 <div class="col-md-12">
        <div class="menu-sidebar row">
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-power"></i>
                </div>
            </div>
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-alert-circled"></i>
                 </div>
            </div>
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-android-add"></i>
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-md-4 iconmenutest">
                  <div class="iconmenu">
                      <i class="ion-power"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                       <i class="ion-alert-circled"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                       <i class="ion-android-add"></i>
                   </div>
             </div>
             </div>
             <div class="row">
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                        <i class="ion-power"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                  <div class="iconmenu">
                        <i class="ion-alert-circled"></i>
                  </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                        <i class="ion-android-add"></i>
                   </div>
             </div>
             </div>
           </div>
        </div>

如果没有你在图片上看到的灰色线，我该怎么做才能保持布局呢？

Answer 1

与其将其设置为“隐藏”(我猜您的意思是0px)，不如将其设置为相同宽度的透明

border: 1px solid transparent;

Answer 2

您有两个很好的选择来处理这个

1. 透明边框

不要设置隐藏的边框使用透明的颜色，所以它将保持在那里，但不可见。

border: 1px dotted transparent;

1. 使用大纲

在悬停中设置轮廓而不是边框

 outline: 1px dotted gray;

大纲不是元素尺寸的一部分，因此元素的宽度和高度属性不包含大纲的宽度。