1

そこで、次の CSS を使用してボタン スタイルを作成しています。

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;

    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    padding: .5em 2em .55em;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
}

他のいくつかのクラスと組み合わせて、色を追加し、ホバリングとプレス効果を与えます。

このスタイルをサイト全体のさまざまな html タグに適用しました。

<span>
<a href>
<button>
<input type="button">
<input type="submit">

それらはすべてChromeと（驚くべきことに）IE7-9で見栄えがよく、うまく機能します（IE7-8ではそれほどではありませんが、問題ありません）。

しかし Firefox では、inputtype タグは type タグのほぼ 2 倍のサイズで表示されa hrefます。これは何が原因ですか？

ここに例があります。

4

3 に答える 3

3

を使用するemと、この動作が発生する可能性があります...

于 2012-07-04T18:04:30.637 に答える
2

属性を追加しline-heightます。

何かのようなもの：

line-height:20px;

するべきです。

Firefox は、要素ごとに異なる行の高さを使用します。firebugで確認するとa、line-heightは 14px、inputsはline-height17px です。

于 2012-07-04T18:47:17.077 に答える
0

さて、私はPablo Rincon、ThomasK、およびbeanlandからの3つの提案すべてを組み合わせて使用​​しました。それらのどれも単独で助けませんでしたが、一緒にそれらはすべてうまくいくようです！

CSSリセットを追加しました。すべてが機能したわけではありませんが、これが見つかりました。http://github.com/necolas/normalize.css

emをpxに変更しました。

.buttonの行の高さを17pxに設定します。

完全。乾杯。

于 2012-07-05T09:05:08.883 に答える