2014/06/20
最近はレスポンシブのお仕事が増えてきたのですが、
よくメールフォームなんかでテキストボックスにwidth:100%な上paddingやborderを設定しているとなんかはみ出す現象が。
どうも幅100%＋padding(border)の幅を描画しちゃうらしい。
解決策としては
input[type=”text”]{
box-sizing: border-box;
}
というふうにbox-sizingをbordrやpaddingも含めて100%にするように指定すればOK。
最近では最初のresetとして全要素にbox-sizing指定してます。
