-1

テキスト ボックスと送信ボタンの 2 つの要素のみを水平方向に配置する必要がある単純な HTML フォームがあります。

ボタンには背景画像があり、その値を「」に設定したいと思います。

Safari と Firefox では、要素に行の高さを設定すると、配置が維持されます。

ただし、Chrome ではこれだけでは不十分です。value=" " (スペースに注意) を設定するか、別のテキスト値を指定する必要があります。そうしないと、要素がシフトします。

これはHTMLとcssです

<form>
    <input type="text" id="email" class="textBox" />
    <input type="submit" id="submitSubscribe" class="submitButton" value="" />
</form>

.submitButton{
    width:30px;
    line-height:30px;
    background:url('');
}

.textBox{
    line-height:30px;
}

#email{
    width:146px;
}

ここに私の jsfiddle があります: http://jsfiddle.net/EmCQJ/5/

値が空白の場合とは異なり、Chrome が value 属性のテキストと異なる配置を計算する理由を知っている人はいますか? 値にそのスペースを残すことは、ハックソリューションのように感じますが、明らかな css 修正をすべて試しましたが、まだ機能しません。どんな入力でも大歓迎です。ありがとう！

4

1 に答える 1

1

これでうまくいくはずです：http://jsfiddle.net/EmCQJ/38/

ここで鍵となったのは

vertical-align: text-top;

input-text 要素と input-image 要素のベースラインは異なりますが (vertical-align のデフォルト設定)、text-top 行は同じです。

ブラウザーごとにデフォルトが異なるため、input-text 要素のマージン、パディング、および境界線を手動で設定する必要があります。これを行うとき、高さは要素のサイズからマージン、パディング、ボーダーを差し引いたものであることを覚えておいてください。したがって、高さの合計を 30 ピクセルにしたい場合は、上から 1 ピクセル、下から 1 ピクセルを引いて、CSS の高さを 28 ピクセルにするようにしてください。

于 2013-05-24T23:45:31.800 に答える