html - 边框像素重叠

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;*/
}