html - 設定された寸法で内側に送信境界線を入力します

Question

<input type="submit">JavaScriptが有効になっていないユーザーをサポートする必要があるため、使用をやめることを提案しないでください。

送信ボタンがあり、それに:hover境界線を適用します。ただし、Firefox 15およびIE7では、境界線が要素の内側に適用されることに気付きました。widthこれは、要素にfixedとaheightを設定し、それらを削除すると正常に動作するためと思われます。ただし、ブラウザの不整合により、送信ボタンがすべてのブラウザで同じサイズになるように、幅と高さが必要です。

要素内に境界線が描画されないようにする方法を知っている人はいますか？

関連する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

box-sizingこの入力に適用されているプロパティがあるかどうか疑問に思います。box-sizing: border-box幅と高さの範囲内で境界線とパディングが発生します。* { box-sizing: border-box; }この手法を使用するCSSテンプレートを使用しているのではないでしょうか。試す

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

Answer 2

ボタンにカーソルを合わせたときにマージンを削除してみますか？

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

}

Answer 3

これを使ってみませんか：

border: 2px solid #3393B5;

または：

border: 2px solid #fff;

それ以外の：

border: 2px solid #000;