2014-12-12 175 views
0

我遇到了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> 

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

+0

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

回答

1

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

border: 1px solid transparent; 
+0

完美,謝謝! – baao 2014-12-12 23:43:02

+1

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

2

你有兩個偉大的選擇與此

    工作
  1. 透明邊框

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

border: 1px dotted transparent; 
  • 使用大綱
  • 集輪廓代替邊界懸停

    outline: 1px dotted gray; 
    

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