FireFoxでボタンのdisabled有無で、微妙にボタンサイズが変わってくる場合があります。
変わってしまうので、ボタンのpaddingを変更している場合です。(デフォルトのままは大丈夫)
FireFoxのデフォルトスタイルシートでは、buttonのdisabled有無でpaddingとborderのサイズの組み合わせが異なります。
「(FireFoxのインストールディレクトリ)\res\forms.css」がフォームのスタイルを定義しているスタイルシートとなっており、その中でボタンのスタイルは下記のように定義されています。
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
}
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here and for text inputs */
padding: 1px 7px 1px 7px;
border: 1px outset ButtonShadow;
color: GrayText;
cursor: inherit;
}上記のようにpaddingとborderのサイズが、disabledの有無によって異なるため、ボタン(button,submit,reset)に対してpaddingの変更を行う際には、disabledの有無によってサイズを微調整してあげる必要があります。
が、、ボタンのpaddingとborderのサイズは、ブラウザによってデフォルトスタイルに差があるので、実際のところ、FireFoxであわせようとすると、Operaであわない…といった現象にハマリます。
disabledを使う場合には、デフォルトスタイルシートをそのまま使えるような状態にするのがベストなのかもしれません。
私は今のところ、FireFoxに合わせたスタイルにしています。(FireFoxにあわせておいても、Operaでそれほど違和感ないので)
