邊框擴大div高度

我遇到了css中的邊框問題，它們被設置爲在正常狀態下隱藏，在懸停時爲1px。結果是這樣的：邊框擴大div高度

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>

我應該怎麼做，以保持佈局沒有你在圖片中看到的灰線？

來源

2014-12-12 baao

無法使用提供的代碼進行復制。 – showdev 2014-12-12 23:42:20

而不是設置它的「潛伏」（我猜你的意思是0像素），將其設置爲透明的寬度相同

border: 1px solid transparent;

來源

2014-12-12 23:40:45

完美，謝謝！ – baao 2014-12-12 23:43:02

你太快了 - 可以在11分鐘內接受.. :) – baao 2014-12-12 23:45:35

你有兩個偉大的選擇與此

透明邊框

不設置隱藏邊框採用透明色，所以它仍將存在，但沒有噸可見

border: 1px dotted transparent;

使用大綱

集輪廓代替邊界懸停

outline: 1px dotted gray;

輪廓不是部分元素的尺寸，因此元素的寬度和高度屬性不包含寬度o f大綱。

來源

2014-12-12 23:44:22

邊框擴大div高度

回答

相關問題