FireFoxでボタンにdisabledを設定すると、ボタンが縮む

FireFoxでボタンのdisabled有無で、微妙にボタンサイズが変わってくる場合があります。

スタイルを変更していない場合(デフォルトのまま)は大丈夫です。

→Blogへ戻る

padding:1pxの場合

スタイルの内容

input {
    margin: 0;
    padding: 1px;
    font-style: normal;
    font-weight: normal;
    font-family: Verdana, Arial, sans-serif;
    font-size: 100%;
}

上記スタイルを適用したボタン(disabledを指定した方が小さくなる)

 

disabledとそうでないときのスタイルを分けて調整した場合

スタイルの内容

.def_button {
  padding: 0px 6px 0px 6px;
}

.def_button[disabled] {
  padding: 1px 7px 1px 7px;
}

上記スタイルを適用したボタン(どっちも同じ大きさ)