html - border-top 与左右边界冲突？

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/