CHROMA

世の中の "当たり前" を確認する

button 要素に高さの指定をする時

a 要素等で高さを指定した場合とbutton 要素で高さを指定した場合では見た目上同じにはならない。
これは、ChromeFirefox だと button 要素に box-sizing: border-box; が指定されており、ボーダーを含めた高さになっているのが原因である。

a 要素などと同じ高さにするには以下の指定しておく必要がある:

 button {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }

a, button 要素で同じボタンっぽい見た目にするスタイルを当てた時に気づいた。