Border-box style wont work - html

Question

Please, see this fiddle: http://jsfiddle.net/xg6SJ/2/
Why text jumps?
Why borders on hover expands menu's div?
*, *:before, *:after
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div
{
height: 100px;
width: 960px;
margin: 0 auto;
background-color: #eee;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{
display: block;
float: left;
box-sizing:border-box;
}
li > a
{
text-decoration: none;
font-size: 20px;
display: table-cell;
height: 100px;
vertical-align: middle;
padding: 0 18px;
}
li:hover
{
border-top: 2px red solid;
border-bottom: 2px red solid;
background-color: #ddd;
}
<div>
<ul>
<li>sdfdf</li>
<li>sdfdf</li>
<li>sdfdf</li>
<li>sdfdf</li>
</ul>
</div>

Answer 1

The li doesn't have a fixed height. If you set the height of the li to 100px the border is put inside the element on hover.
To prevent the text from jumping you can remove the additional height added by the borders from the a like this:
li:hover > a {
height: 96px; /* 100 - (border-top + border-bottom) */
}
Or you can add a transparent border and a fixed height to the li (demo).
li {
...
border-top: 2px transparent solid;
border-bottom: 2px transparent solid;
height: 100px;
}

Answer 2

Because the border is added to the div on hover only. So on hovering, the div's height is expanded. If you added border-top: 2px grey to the li (in 'unhovered' state) , you won't have that jumping effect anymore.
Check the updated fiddle: http://jsfiddle.net/xg6SJ/3/

Answer 3

li
{
display: block;
float: left;
box-sizing:content-box;
}
Because, border-box ... The width and height properties include the padding and border, but not the margin. content-box ...This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the border, margin, or padding.
You are adding 2px to top on bottom on hover which where not their before.
Or add the two pixels of border to li and have the border be the same as the background until you hover.
li
{
display: block;
float: left;
border-top: 2px #eee; solid;
}