从我的水平列表菜单中减去边框宽度

Question

这是我的横向菜单的 CSS 代码，它是跨浏览器的，效果很好，它有 1 个故障。 :)

包含所有内容的#menu 必须具有 100% 的宽度，但是当我在其上添加边框时，边框会增加宽度，使其变大并搞砸我的布局。 我所做的是使用 jquery 减去 2 像素边框。有没有办法用 css 做到这一点？

这里是菜单的css：

#menu {
width: 100%;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-right: solid 1px #555;
border-left: solid 1px #555;
border-bottom: solid 1px #555;
}
#menu ul {
margin: 0 0 0 0.5em;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
float: left;
width: 20%;
line-height: 1.5em;
margin-right: 1em;
margin-bottom: 0.5em;
background: url(images/headline.jpg) top repeat-x;
border: solid 1px #555;
text-align: center;
}
#menu a {
display: block;
width: 100%;
font-size: 70%;
text-decoration: none;
}
#menu a:hover {
background: #000 none;
}

一些注意事项： 菜单必须由用于设置背景颜色、左边距/填充等样式的 div 包裹。我发现无法设置 UL 本身的样式，因为我无法清除其中的浮动。因此 OL 的高度总是为零。

非常喜欢！

Answer 1

使用outline 代替border。它以相同的方式创建“边框”，只是将它们放在框架的内部，而不是像 border 那样放在外部。

Answer 2

如果可以忽略IE7及以下，可以使用box-sizing。