Question

以下的html和css会在IE 11的输入的底部和/或右边缘产生一个奇怪的“间隙像素”。我试图摆脱它，但我所有常用的技巧都失败了。有什么想法吗？

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

边框尺寸使它看起来像那样。

EM大小输入的IE渲染错误

1 个答案: