使用设置尺寸输入提交边框

Question

请不要建议我停止使用<input type="submit">我需要支持不启用javascript的用户。

我有一个提交按钮，在:hover上我应用了边框。但是我注意到在Firefox 15和IE7中边框被应用到元素的内部。这似乎是因为我已经为元素设置了固定的width和height，并且在删除它们后行为正常。但是由于浏览器的不一致，我需要宽度和高度来确保所有浏览器中的提交按钮大小相同。

有谁知道如何防止在元素中绘制边框？

相关CSS：

#searchform .submit {
    vertical-align: middle;
    float: right;
    height: 31px;
    width: 31px;
    position: relative;
    left: -4px;
    margin-right: -4px;
    background-image: url(library/images/search-icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: none;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topright: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}
#searchform .submit:hover {
    margin: -2px -6px 0px 0px;
    border: 2px solid #000;
}

相关HTML：

<input type="submit" value="" class="submit btn" />

Answer 1

尝试在悬停按钮时删除边距？

#searchform .submit:hover {
border: 2px solid #000;

}

Answer 2

想知道是否有box-sizing属性应用于此输入。 box-sizing: border-box会导致边界和填充在宽度和高度内发生。我想知道你是否使用了使用* { box-sizing: border-box; }技术的CSS模板。试试

#searchform .submit { box-sizing: content-box; }

Answer 3

你为什么不用这个：

border: 2px solid #3393B5;

或者：

border: 2px solid #fff;

而不是：

border: 2px solid #000;