4

ChromeとFireFoxでのこのJSFiddleの例を見てください。

Chromeでは、ボタンはFireFoxよりも少し小さくする必要があります。Firefox 4 +でデフォルトのボタンスタイルをリセットする方法（ボタンを少し小さくした）からソリューションCSSを追加しましたが、FireFoxではボタンがまだ大きくなっています。この例では違いはあまりわかりませんが、それが私のデザインにどのように影響するかを見てください。

クロム：
Chromeのスクリーンショット

FireFox：
FireFoxのスクリーンショット

ご覧のとおり、FireFoxではボタンが厚く、レイアウトに影響を与えています。ボタンの代わりにスタイル付きdivを使用するというこの不足を回避する方法はありますか？

また、MeyerのCSSリセットスタイルシートを使用しています

4

4 に答える 4

10

inputFirefoxは、 sとbutton要素に特別なパディングを追加します。これはそれの世話をします：

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}
于 2012-07-23T02:52:07.687 に答える
3

ボタン/送信入力がブラウザー間で同一であることを保証する唯一の方法は、divを使用してそれらを再作成することであると結論付けました。ボタンと同じ方法でクリックイベントをdivにアタッチできるため、ボタン入力の作成は簡単です。送信入力の作成は、ほとんど難しくありません。jQueryを使用して、たとえば「submit」などのクラスを宣言し、ロード時にそのクラスを持つすべての要素に送信ボタン機能を追加することで、これを解決しました。ここに例があります：

// On page load:
$('.submit').on('click', function(e) {
    $(this).closest('form').submit();
});

フォームにない送信クラスを持つDivは、クリックしても何もしません。

tabindex="n"要素に（数字は）追加するnと、通常のボタンと同じように、タブを使用してフォーカスを合わせることができます。:focusまた、 css疑似クラスを使用して、フォーカスされていることを示すようにスタイルを設定することもできます。次に、スペースを使用するか、Enterキーを押して、このイベントハンドラーでボタンをクリックします。

$('.submit').on('keypress', function(e) {
    if (e.keyCode == 13 || e.keyCode == 32)
        $(this).closest('form').submit();
});

（私は急いでその最後のスニペットを書きましたが、実際にはテストしていません。エラーを見つけたり、テストに成功した場合は、それに応じてこの回答を編集してください。）

于 2012-07-27T21:08:50.563 に答える
2

万が一line-height、ページのボタンにを設定しましたか？あなたはフィドルに参加していませんがline-height、Firefoxや私が信じている他のブラウザでは通常以外は受け入れられません-多分IE、私にはわかりません。

于 2012-07-23T03:20:18.373 に答える
0

CSSのリセットを試しましたか？私はこのコンピューターにFFを持っていません。さもないと、これが機能するかどうかを確認します。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
于 2012-07-23T02:53:44.770 に答える