Пограничные пиксели перекрываются

Question

Пограничные пиксели перекрываются

0

Я не могу понять это.

Я хочу, чтобы цветная рамка пересекалась с серой границей. Однако граница отказывается перекрывать нижнюю границу.

Вот картина: 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/

Заранее спасибо!

Anthony 19 окт. 2013, в 17:26

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Dusty · Accepted Answer · 2013-10-19T12-38-00.000Z

Вы можете попробовать это

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

Частично, но я хочу, чтобы фактическая граница появилась там, чтобы она выглядела чище. Я смотрю в топ: 1px прямо сейчас
Если бы я был вами, чтобы сделать его чище и проще, я бы выделил эти 5-пиксельные границы цвета отдельными элементами с помощью display:inline-block и установил их ширину, высоту и цвет фона.
потрясающе, что в конечном итоге работает. Спасибо!