IE8 интервал проблема

Question

У меня есть стиль кнопок, к которым ie8 добавляет дополнительное пространство, я думаю, это как-то связано с минимальной высотой, но я не могу понять, что, я пытался переполнить скрытые и минимальные высоты, но ничего не изменилось,

js fiddle link - введите описание ссылки здесь

ниже приведен код (спасибо всем, кто его отформатировал):

.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/

Answer 2

Попробуйте этот код:

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

Я изменился:

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

.button {height: 100%;}