IE Rendering Bug на входах с размерами EM

Question

Следующие html и css приводят к странному «пикселю зазора» по дну и/или правому краю моего ввода в IE 11. Я пытаюсь избавиться от него, но все мои обычные трюки терпят неудачу. Есть предположения?

http://jsfiddle.net/9ev8z1n9/2/

Html:

<div class="return-to-main"> 
    <input class="clickable" value="submit" type="button" /> 
</div> 

CSS

body{ 
    font-size: 16px; 
} 
.return-to-main { 
    float: left; 
    height: 100%; 
    margin-left: 5.5em; 
    font-size: 1.4em; 
} 
.return-to-main input[type="button"] { 
    border: 0; 
    margin-top: 1.5em; 
    color: white; 
    border-radius: 5px; 

    height: 80px; 
    width: 200px; 
} 

.return-to-main input:not(:active) { 
    border: solid 1px rgb(90, 25, 30); 
    border-bottom: solid 4px rgb(90, 25, 30); 
} 

    .clickable { 
     border: solid 0.06em rgb(110, 45, 50); 
     background-color: rgb(110, 45, 50); 
     background: linear-gradient(to bottom, rgb(200, 30, 40) 0%,rgb(110, 45, 50) 49%,rgb(110, 45, 50) 100%); 
    } 
    .clickable:active { 
     background-color: rgb(100, 35, 40); 
     background: linear-gradient(to bottom, rgb(100, 35, 40) 0%, rgb(100, 35, 40) 49%,rgb(140, 30, 40) 100%); 
    } 

Edit: Удаление границы радиуса, кажется, чтобы исправить это, как и удалением линейного градиента. Оба они являются частью общего дизайна.

Answer 1

Изменение:

.return-to-main input:not(:active) { 
    border-bottom: solid 4px rgb(90, 25, 30); 
} 

To:

.return-to-main input:not(:active) { 
    border-bottom: solid .01em rgb(90, 25, 30); 
} 

Размер границы вызывает его появления в этом роде.