边框像素重叠

Question

我无法弄清楚这一点。

我想要彩色边框重叠灰色边框。但是，边框拒绝重叠底部边框。

这里有一个画面： http://gyazo.com/bc4cbaab9bfa3a173709309ad64f880e.png

代码的边界是：

<li> 
      <div class="content blue-border"> 
       <span class="icon-uniE601"></span> 
      </div> 
     </li> 


.sidebar ul li { 
    background-color: #f2f2ea; 
    border-right: 1px solid #dfdfd7; 
    border-top: 1px solid #dfdfd7; 
} 
.content 
{ 
     border-left: solid 5px #0094ff; 
     width:100%; 
     height:100%; 
} 
.content span 
{ 
    height: 70px; 
text-align: center; 
line-height: 70px; 
font-size: 2em; 
color: #787878; 
} 
.sidebar ul li:hover 
{ 
    background-color: black; 
} 
.sidebar ul li:first-child 
{ 
    border-top: none; 
} 
ul li 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 
.blue-border 
{ 
    border-left: solid 5px #0094ff; 
} 
.orange-border 
{ 
    border-left: solid 5px #ff6a00; 
} 

而这里的代码： http://jsfiddle.net/bG8Wb/2/

提前感谢！

Answer 1

你可以试试这个

element_that_needs_to_shift { 
position:relative; 
top:1px; 
} 

...

这是你想要的吗？

.sidebar ul li { 
background-color: #f2f2ea; 
border-right: 1px solid #dfdfd7; 
/*border-top: 1px solid #dfdfd7;*/ 
}