调整浏览器大小时CSS边框影响宽度

我使用以下方法制作了两个简单的导航菜单ul and li。一种是无边框的，另一种是有边框的。两个菜单的宽度固定为 400px。

在第一个菜单中我给了每个li固定宽度为 100px，在第二个菜单中，根据宽度计算，我给出了固定宽度 98px，左右边框均为 1px，每个边框总共为 100pxli.

现在我的问题是，当我使用“Ctrl + -”调整浏览器分辨率大小时，第一个菜单在任何分辨率下都保持不变，但在第二个菜单中，最后一个元素将移动到第一个元素下的下一行。

我想知道为什么会发生这种情况以及如何解决。 提前致谢。

这是 JSFiddle 链接：http://jsfiddle.net/jhz56/ http://jsfiddle.net/jhz56/

边框宽度不与 li 宽度一起缩放，这就是菜单中断的原因。因此，一种解决方案可以简单地是：

.nav2 ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/jhz56/1/ http://jsfiddle.net/jhz56/1/