故障使用div的丝带 - 导航菜单

Question

我使用这个HTML：

<div id="navleft"></div> 
<nav id="nav"> 
</nav> 
<div id="navright"></div> 

而这个CSS：

#navleft { 
background:url('./images/navleft.png'); 
height:48px; 
width:11px; 
float:left; 
position:absolute; 
margin-left:-13px; 
} 

#navright { 
background:url('./images/navright.png'); 
height:48px; 
width:11px; 
float:right; 
margin-right:-13px; 
} 

#nav { 
background:url('./images/navbg.png') repeat-x; 
height:48px; 
width:100%; 
float:left; 
position:relative; 
} 

的问题是左/右图像会不重视主要功能区。

我试过弄乱位置，显示和边距，但最接近的我有我的目标是他们之间（上面的代码）之间的白色1像素。

Visual example

任何人都可以解释为什么这种情况正在发生和/或提供解决方案？

非常感谢！

Answer 1

试试这个

jsFiddle

#navleft { 
background:url('http://placehold.it/48x48') ; 
float:left; 
height:48px; 
width:48px; 
} 

#navright { 
background:url('http://placehold.it/48x48') ; 
height:48px; 
float:left; 
width:48px; 
} 

#nav { 
background:url('http://placehold.it/75x48') repeat-x; 
height:48px; 
width:70%; 
float:left; 
} 

调整高度和宽度。因此，