widthとheightの値にpaddingとborderの幅を含むようにしてくれるCSSプロパティ。
これまでと考え方が異なるので、１サイト内でデフォルトとbox-sizingの両方を使っていくと混乱しそう。
IE8以下も動かないので、当面スマホサイトで使用していこうかと。
リキッド内での％指定要素に枠線つけるの簡単になったなー
便利！
CSS
.tab { width:100%; margin:0 0 20px 0; padding:0;}
.tab li { display:inline; list-style-type:none;}
.tab li a { width:20%; margin:0; float:left; text-align:center; display:block; margin:0; padding:15px 0px 13px; background:#DDD; border-left:1px solid #EEE; border-right:1px solid #AAA; border-top:1px solid #EEE; border-bottom:1px solid #AAA; text-decoration:none; -webkit-box-sizing: border-box; box-sizing: border-box; }
.tab li a:hover { background:#FFF;}
.tab li.here a { border-top:1px solid #6BCF29; border-left:1px solid #6BCF29; border-right:1px solid #529E1F; border-bottom:1px solid #529E1F; background-color: #5EB323; color:#FFF;}
HTML
<ul class="tab"> <li class="here"><a href="">ボタン1</a></li> <li><a href="">ボタン2</a></li> <li><a href="">ボタン3</a></li> <li><a href="">ボタン4</a></li> <li><a href="">ボタン5</a></li> </ul>
