1

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

我有一个提交按钮，并在上面:hover应用边框。但是我注意到在 Firefox 15 和 IE7 中，边框被应用到元素的内部。这似乎是因为我已经为元素设置了一个 fixedwidth和 a 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" />
4

3 回答 3

0

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

#searchform .submit { box-sizing: content-box; }
于 2012-09-05T15:32:11.300 回答
0

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

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

}

于 2012-09-05T15:21:25.543 回答
-2

你为什么不使用这个：

border: 2px solid #3393B5;

或者：

border: 2px solid #fff;

代替：

border: 2px solid #000;
于 2012-09-05T15:04:45.990 回答