web-dev-qa-db-ja.com

Firefox4でデフォルトのボタンスタイルをリセットする方法+

Firefox 3.6では、::-moz-focus-inner {border:0;padding:0;margin:0;}を使用して、追加されたデフォルトのマージンとパディングforms.cssを削除できます。

Firefox 4でこれをリセットするにはどうすればよいですか？インストールディレクトリ内でボタンにスタイルを追加できる.cssファイルを検索してきましたが、ff4のファイルが見つかりません-ボタンには、テキストを垂直方向に揃えることができない厄介な1pxの上部パディングが表示されます中間。

http://easwee.net/other/FF_problem.gif

編集：私はリセットスタイルシートを使用しているので、スタイルをリセットする必要はありません。ここで混乱しているのはブラウザのスタイルシートです。

cssfirefoxbuttoninput
21
easwee

私は実際に自分で解決策を見つけました。

URLフィールドに次のように入力します：resource://gre-resources/forms.css-これにより、FF4のforms.cssが開きます-そして次のセレクターを検索します

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner

これをメインのスタイルシートに次のように配置します。

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

それはもうあなたのcssを上書きするべきではありません。また、入力のフォントスタイルを定義していない場合、FFは本文のフォントスタイルを継承しないことに注意してください。

26
easwee

値を未定義に設定してみてください（border:undefinedなど）。ここではわかりませんが、同様の問題が発生したときにうまくいきました。

1
wildcard

Twitter Bootstrapその reset.less （これはもっとbarebonesバージョン normalize.css ）：

button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
  padding: 0;
  border: 0;
}

余談ですが、Bootstrapのreset.lessは、独自のルールを維持するよりも、フォームのクロスブラウザ性を実現するための、おそらくより信頼性が高く、永続的なソリューションです。 Meyerのreset.cssよりもはるかに完全ですが、normalize.cssよりもミニマリストです。

1
julien_c

cssリセットスタイルシートを使用するだけで、ほとんどのブラウザのすべてのデフォルトcssがリセットされます

http://meyerweb.com/eric/tools/css/reset/

またはこのstackeoverflowQ＆Aをお読みください

https://stackoverflow.com/questions/116754/best-css-reset

0
Christophe