IE8间距问题

Question

我有一个按钮样式ie8正在增加额外的空间，我认为它与最小高度有关但无法想象我们的内容，我已经尝试过溢出隐藏和最小高度黑客但没有任何变化，

js小提琴链接 - 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%;}