【求解】IE下background-position失效问题

       最近在做一个导航时遇到一个在IE下background-position失效问题,在百度、谷歌上求助无果，大家帮帮我!

首先定义headnav的背景，我用的是没有横线条的蓝色图片作为背景；让后将小横线定义为li元素的背景，居右，但是无论定义100% 2px，还是106px 2px 还是center right ，

在IE下都无效果，FF下显示正常，怎么回事？

 

 

Html：

    <div class="headnav"> 

      <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a> </li>
          <li><a href="#">News Center</a></li>
          <li><a href="#">Investors</a></li>
          <li><a href="#">Download</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

   </div>

 

CSS：

.headnav{
	width:964px;
	height:40px;
	float:left;
	background:url(../images/navbg.png) no-repeat;
	margin-top:12px;
	_margin-top:-10px;
	margin-left:27px;
	overflow:hidden;
}
.headnav ul {
	padding-left:20px;
	
}
.headnav ul li{
	background:url(../images/navline.png) no-repeat 106px 2px;
	width:108px;
	height:40px;
	float:left;
}
.headnav ul li a{
	width:108px;
	height:40px;
	font:16px/40px Arial, Helvetica, sans-serif ;
	color:#fff;
	text-align:center;
	text-decoration:none;
}
.headnav ul li a:hover{
	width:106px;
	height:37px;
	display:block;
	color:#fff;
	line-height:37px;
	background:url(../images/navhoverbg.png) no-repeat;
}

 

 

FF下：

 

   IE下：

   

 

怎么回事呢，求解？