Question

我在css中遇到边框问题，它们设置为隐藏在正常状态和1px悬停时。结果如下：

enter image description here

鼠标悬停时，下排被向下推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

您有两个很好的选择来使用此

透明边框

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

border: 1px dotted transparent;

使用大纲

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

 outline: 1px dotted gray;

轮廓不是元素尺寸的一部分，因此 element的width和height属性不包含宽度概要

Answer 2

而不是将其设置为＆＃34;隐藏＆＃34; （我猜你的意思是0px），将它设置为透明，宽度相同

border: 1px solid transparent;

边框扩展div高度

2 个答案: