I am encountering an issue with a button style in IE8 that is adding extra space. I suspect it may be related to the min-height property, but I have tried using overflow hidden and min-height hacks without any success.
Here is the link to the code on JSFiddle - enter link description here
Below is the formatted code:
.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;
}