html - EM 尺寸输入上的 IE 渲染错误

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%);
    }

编辑:删除 border-radius 似乎可以解决问题，删除线性渐变也是如此。这两者都是整体设计的一部分。

Answer 1

改变:

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

收件人:

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

边框大小导致它看起来像那样。