button 要素に高さの指定をする時
a
要素等で高さを指定した場合とbutton
要素で高さを指定した場合では見た目上同じにはならない。
これは、Chrome や Firefox だと button
要素に box-sizing: border-box;
が指定されており、ボーダーを含めた高さになっているのが原因である。
a
要素などと同じ高さにするには以下の指定しておく必要がある:
button { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
a
, button
要素で同じボタンっぽい見た目にするスタイルを当てた時に気づいた。