3

それぞれ独自のフォント サイズを持つ、テキスト フィールドの横にある送信ボタンとの完全な位置合わせを達成しようとしています。問題は、ブラウザーごとに異なる結果が得られることです (私のサイトは IE7+ および最新のすべてのブラウザーをサポートしています)。

これが私が取り組んでいるものです：http://jsfiddle.net/bxTfn/18/

Chrome や IE では動作しているようですが、FF では送信ボタンが 1px 短すぎます。

ご協力いただきありがとうございます。

明確化: テキスト ボックスのフォント サイズを 14 ピクセル、サブミットのサイズを 12 ピクセルにします。

更新: http://jsfiddle.net/bxTfn/24/ これは Chrome、FF、および IE7 では機能しているようですが、送信が 1px ジャンプする IE8 および IE9 では機能していないようです。

4

2 に答える 2

0

あなたのフィドルでは、あなたへの次の変更はCSSそれらを完全に並べているようです:

input[type=text] {
    height: 18px;
    font-size: 14px;    
}

input[type=submit] {
    font-size: 14px;
    height: 20px;
}​
于 2012-07-09T13:47:23.970 に答える
0

box-sizing はあなたが探しているものかもしれません: http://jsfiddle.net/23CE8/1/

これは Chrome と IE8 で機能しましたが、IE8 では入力ボタンと送信ボタンの位置がずれています (高さは同じですが)。それを解決するために、両方の要素に vertical-align: middle を追加しました (ただし、親コンテナーにある可能性があります)。

IE7 で box-sizing を使用したい場合は、いくつかのポリフィルが必要になります。ポール アイリッシュのブログ ( http://paulirish.com/2012/box-sizing-border-box-ftw/ ) からいくつかのポリフィルへのリンクがあります。いくつかの長所と短所を説明します。

于 2012-07-09T21:37:03.340 に答える