边框顶部与左右边框冲突

Question

我有这样的HTML：

<style>
#footer{
width: 777px;
padding: 20px 24px;
background: white;
margin: 0px auto 25px;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
border-top: 12px solid #bbb;
background: #fbfbfb;
}
</style>
<div id='footer'></div>

你可以看到：顶部边框的哈夫特不正常显示（jsfiddle）。那么，解决方案呢？（不要再创建任何div。

Answer 1

好的，根据您不添加元素的要求，我想出了一个仅用于踢球的解决方案。

#footer:before{
  content:"";
  display:block;
  width:349px;
  height:20px;
  background:#BBB;
  position:absolute;
  top:0px;
  left:0px;
 }

http://jsfiddle.net/zyglobe/xf7sa/2/