html - 边框扩展div高度

Question

我在 css 中遇到边框问题，它们在正常状态下设置为隐藏，在悬停时设置为 1px。结果是这样的:

鼠标悬停时，下行被向下推 1 像素。我尝试添加 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

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

1. 透明边框

不要设置隐藏边框使用透明色，所以它会保留在那里但不可见

border: 1px dotted transparent;

1. 使用大纲

悬停时设置轮廓而不是边框​​

 outline: 1px dotted gray;

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.