5

2 つのボタンがあり、1 つは入力として実装され、もう 1 つはスパンとして実装されています。それらは次のものと並べて配置されます。

{ display:inline-block; }

ボタンはカスタマイズされたタグからレンダリングされ、クラス名は jsp で動的に追加されます。css には、影、背景のグラデーション、パディング、およびフォントの定義がいくつかあります。彼らは、border-radius のようないくつかの CSS3 を使用しています。

しかし、Firefox では、スパン ボタンの高さは 18 で、入力は 20 です。興味深いことに、IE 8 ではそれらの高さが両方とも 25px ですが、なぜですか?

今、私はそれらを同じ高さにし、水平に揃える必要があります。

更新: jsfiddle にこれら 2 つのボタンがあります。高さを使用: 22px; および垂直方向の位置合わせ:上; あまり役に立ちません。

http://jsfiddle.net/gBeCP/

4

4 に答える 4

8

タグに を設定してみてくださいvertical-align:top。ブラウザがデフォルトを適用できなくなるため、input寸法を具体的に設定することをお勧めします。px

于 2013-09-09T18:04:50.260 に答える
1

私はそれをやったと思います。

このページの回答は、FF が入力の送信タイプとスパンでパディングを異なる方法で処理することを示しています。<input type='submit'> の高さ/幅に追加された CSS パディング

私の解決策は、入力とスパンの両方の最小高さを設定してから、vertical-align:middle; を使用することです。それらを揃えるために。最後に、パディング番号をいじって、ボタンのテキストを揃えます。

于 2013-09-09T21:58:53.060 に答える
0

最も簡単な解決策は、次の 2 行です (簡潔にするためにベンダー プレフィックスは削除されています)。

.tranCoreButton {
    /* I couldn't be bothered to read through the rest of the CSS, or the
       in-line CSS; seriously: *minimal* reproductive demo, please... */
    display: inline-block;
    box-sizing: border-box;
}

JS フィドルのデモ。

于 2013-09-09T22:08:16.067 に答える