按钮和容器元素之间的2px差异

Question

我正在使用显示设置“table”创建一个ul导航栏，其中li包含大小均匀的按钮。我在ul上设置了一个盒子阴影，以避免按钮之间阴影中的1px间隙。不幸的是，按钮的呈现比它们包含的li元素小2px。这会导致阴影和按钮之间出现间隙。

有关如何解决的任何想法？以前，我一直在使用display：inline但我遇到了同样的问题。谢谢！

http://jsfiddle.net/Lfvq9/

CSS：

#navbar ul {
  top: 1%;
  height: 98%;
  width: 98%;
  margin: 0 2% 0 2%;
  padding: 0;
  list-style: none;
  box-shadow: 0 4px 2px -2px #888888;
  border-radius: 20px;
  display: table;
  table-layout: fixed;
}

#navbar li {
  height: 100%
  width: 100%
  display: table-cell;
  padding: 0;
  margin: 0;
}

#navbar button {
  height: 100%;
  width: 100%; 
  margin:0;
  padding: 0;
  border-top:1px solid #696969;
  border-bottom:1px solid #696969;
  border-right:1px solid #696969;
  border-left: 0px;
}

漂亮的HTML :(实际HTML没有间距以避免1px间隙）

<ul>
  <li>
    <button>
    </button>
  </li>
  <li>
    <button>
    </button>
  </li>
</ul>

Answer 1

这似乎解决了这个问题：

#navbar button {
    margin: 2px 0 0;
}

http://jsfiddle.net/Lfvq9/1/