IE8間距問題

Question

我有一個按鈕樣式，即ie8增加了額外的空間，我認爲它與最小高度有關，但不能指望我們什麼，我試過溢出隱藏和最小高度黑客但沒有什麼變化，

爵士小提琴鏈接 - enter link description here

下面

是代碼（感謝誰格式化吧）：

.button { 
    float:left; 
    width:auto; 
    min-width:80px; 
    min-height:40px; 
    margin:0; 
    padding:10px 0; 
    font-size:14px; 
    line-height:20px; 
    text-align:center; 
    color:#e4e5e6; 
    background-color:#d04c21; 
    background-position:center; 
    background-repeat:no-repeat; 
    border-left:1px solid rgba(255,255,255,0.2); 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    -webkit-transition:all .2s ease-out; 
    -moz-transition:all .2s ease-out; 
    -o-transition:all .2s ease-out; 
    transition:all .2s ease-out; 
} 

.switch .button-group .button { 
    min-height:30px; 
    padding:5px 10px; 
    color:#393c3e; 
    background-color:#b1b2b3; 
    -webkit-transition:all .2s ease-out; 
    -moz-transition:all .2s ease-out; 
    -o-transition:all .2s ease-out; 
    transition:all .2s ease-out; 
} 

Answer 1

-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
IE8採用箱上漿部分支持。此外min-width:80px;將它解釋爲：http://caniuse.com/#search=min-width

Answer 2

試試這個代碼：

http://jsfiddle.net/m3QXx/2/

我改變：

.switch .button-group{padding: 0 0 0 5px; } 

.button {height: 100%;}