Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

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

Dev

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 要素で同じボタンっぽい見た目にするスタイルを当てた時に気づいた。