調整MD按鈕的奇怪行爲的高度

Question

我想調整一個MD按鈕的高度，這是相當令人沮喪。我已將< button-container>元素硬編碼爲25像素高，這是我希望按鈕的高度。然而，懸停動畫仍然溢出了這個高度，就像這樣：

然而，當我進去25px的高度添加到按鈕本身，似乎抵消的內容，就像這樣：

任何人都知道一種寫法可以解決這種行爲？我不太確定爲什麼硬編碼高度到按鈕導致文本下降到底部。

這裏是我的html：

<div id="buttons-container"> 

    <button 
     md-button 
     id="add-track-button" 
     (click)="addTrack()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Track</span> 
    </button> 

    <button 
     md-button 
     id="delete-track-button" 
     [disableRipple]="true" 
     [disabled]="this.tracksArray.length === 0" 
     (click)="toggleDeleteTrackMode()" 
    > 
     <md-icon>delete</md-icon> 
     <span>Delete Tracks</span> 
    </button> 

    <button 
     md-button 
     id="add-marker-button" 
     [disableRipple]="true" 
     (click)="toggleAddMarkerMode()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Marker</span> 
    </button> 

    <button 
     md-button 
     id="add-frame-span-button" 
     [disableRipple]="true" 
     (click)="toggleAddFrameSpanMode()" 
    > 
     <md-icon>add</md-icon> 
     <span>Add Span</span> 
    </button> 

</div> 

這裏是我的CSS：

#buttons-container { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-start; 
    align-items: center; 
    flex-wrap: nowrap; 
    height: 25px; 
    color: black; 
    background-color: grey; 

    button { 
     font-size: 10px; 
     // If this line is commented out, the text is aligned fine but the hover animation overflows 
     // If it isn't, the content offsets to the bottom like in the picture above 
     height: 25px; 
     padding: 0px 2px; 

     md-icon { 
      font-size: 18px; 
      height: 18px; 
      width: 18px; 
     } 
    } 

    #add-marker-button { 
     md-icon { 
      color: $marker-color; 
     } 
    } 

    #add-frame-span-button { 
     md-icon { 
      color: $frame-span-color; 
     } 
    } 
} 

Answer 1

使用min-height，「最大高度with線height`得到期望的結果。

這是內聯樣式示例。

<md-button style="min-height:25px;background-color:yellow"> Button 1</md-button> 
<md-button class="custome-button" style="min-height:25px;max-height:25px;background-color:red; text-align:center;line-height:25px"> Button 2</md-button> 

這裏是工作codepen。