個人的にハマったところのまとめです。
#inputのボタンとbuttonのボタン
機能的な差はあんまりない。装飾できるかできないかの違いくらい。
あとは後述のcss擬似クラス:activeの差くらい。
##inputのボタン
<input type="button" value="ボタン1">
type属性に button, submit, reset, image を指定できる。
ボタン内文字列の部分的な装飾はできない。
##buttonのボタン
<button type="button">ボタン2</button>
type属性に button, submit, reset を指定できる。
※type属性を省略した場合は**type="submit"**とみなされる。
ボタン内文字列の部分的な装飾ができたり、画像を入れられたりできる。
#buttonとcssの擬似クラス:active
<input class="btn" type="button" value="test1" />
<button class="btn">test2</button>
.btn{
background-color: lightgreen;
border: 1px solid rgb(95, 158, 255);
width: 100px;
height: 50px;
}
.btn:active {
background-color:red;
border: 1px solid rgb(95, 158, 255);
}
擬似クラス:activeは、クリック中などのスタイルを定義することができますが、inputボタンでは文字列上のクリックでは反応しないようです。（もちろん、onclickイベントはどっちのボタンのどこを押下しても反応します。）
#IEブラウザ(互換モード) と buttonデザイン
Windows7のIE8、IE9、IE10 ＋ ドキュメントモードで表示の違いを比較してみました。
(ボタンのcssは手を入れていません。デフォルト表示です。)
ブラウザ＋ドキュメントモードによってpadding、borderの数値が異なります。なのでボタンサイズも変わります。
左側二つはボタンの周り1px分が白くなっていますが、この白い部分までがwidth、heightとして数えられます。
ボタン周りの1pxについての余談：
デフォルトボタンのまま全IEのバージョンでデザインを完璧に統一することは難しいと思われます。
この問題は見た目の差異であり、userAgentによる切り分けも難しいです。ボタン周りが1px白く表示されるのはIE9以下のWindowsベーシックモードとエアロモードのみで、クラシックモードにするとボタンデザインはまた変わります。
統一することに重きを置くなら、デフォルトボタンをやめる、または画像のボタンにする等の対策が有効ではないでしょうか。どっちもできない場合は、この1pxの差異を許容するしかないのでは・・・(ごにょごにょ)。
paddingの差異に関する問題は対策しやすいかもしれません。(私が検証した限りでは)padding;0;にしてもデザインは変わらず、中の文字もちゃんとセンタリングされます。
また、IE8以降からbox-sizingのデフォルト値がborder-box(border,paddingを含んだ幅をwidth,heightとする)からcontent-box(border,paddingを含めない幅をwidth,heightとする)に変わっているようです。
box-sizing: border-box;を指定してwidth,heightをちゃんと指定することで統一することもできると思います。
もしこのほかに何か良い対策案あれば教えてください。
#IEブラウザ(互換モード) と type="submit"
IEのブラウザによって type=”submit” の表示と動作が異なります。
気をつけるべきはIE8.
IE8ではhtml上で一番最初にでてくるtype="submit"がセレクトされた状態になる。
※ボタンが青く強調されているだけの状態をフォーカス、Enterキー押下でonclickイベントが走る状態のことをセレクトと言っています。言葉の意味が違う場合はご指摘ください。
画面表示後に*(マウスクリックやTabキー押下によるフォーカス・セレクト移動をしない状態で)Enterキー押下で期待しないonclickイベント(また、それに伴うonsubmitイベント)*が走ってしまうことがあるので注意が必要。
● 図の一番左（IE5、IE7）と一番右（IE10のIE9互換、IE10)はtype=”button”の時と表示は変わらない。画面表示直後にEnterキーを押下しても反応しない。
● 左から2番目（IE8）は画面表示時に一番最初に出てくるtype=”submit”が自動的にフォーカス・セレクトされた状態になる。この状態のままEnterキーを押下するとonclickイベントが走る。IE10のIE8互換モードは、表示はtype=”button”と変わらないがセレクトはされている模様。Enterキー押下でonclickイベントが走る。
● 右から２番目（IE9のIE9）は、IE8同様見た目はフォーカスされた状態であるが、こちらは画面表示直後にEnterキーを押下してもonclickイベントは走らない。