нижняя граница исчезает, если используется шестнадцатеричная нотация для цвета фона

Question

Я пытался просто применить сплошную границу 1px вокруг метки привязки с определенным «темным» цветом фона, выраженным в шестнадцатеричном значении, и я заметил, что нижняя граница там не было!

После долгих исследований я был удивлен тем, что проблема была вызвана цветом фона, выраженным в шестнадцатеричном виде: видимо, в этом случае браузер начинает визуализировать фон на 1px ниже, чем правильное положение, и результат заключается в том, что фоновый цвет перекрывает нижнюю границу, и если цвет фона темнее, чем цвет границы, то результатом является то, что нижний цвет границы «исчезает».

Я сделал fiddle пытается описать это поведение:

HTML 
    <a href="#" id="a1">ANCHOR1</a> 
    <br> 
    <a href="#" id="a2">ANCHOR2</a> 
    <br> 
    <a href="#" id="a3">ANCHOR3</a> 
    <br> 
    <a href="#" id="a4">ANCHOR4</a> 

CSS 
a { 
    text-decoration:none; 
} 
a, div { 
    width:95%; 
    padding-left:5%; 
    display:block; 
    border:1px solid red; 
} 

#a2, #d2 { 
    background-color:yellow; 
} 

#a3, #d3 { 
    background-color:#00ffb6; 
} 

#a4, #d4 { 
    color:white; 
    background-color:#1769b6;; 
} 

1. тег без фонового цвета: вы видите границу правильно все вокруг него
2. тег с цветом фона, определенным с именем из цвет: граница по-прежнему вокруг метки
3. тег со светлым шестнадцатеричным цветом фона: вы видите, что граница есть, но цвет фона начинает отображаться на 1px ниже, перекрывая нижнюю границу
4. тег с темным цветом фона шестнадцатеричное: нижняя граница выглядит "исчез"

Я использую Mac El Capitain 10.11.6 и попытался с:

• светлячок 51.0.1
• хром 56.0.2924.8
• сафари 10.0.3

все они ведут себя п таким же образом.

Любая идея, как получить полную сплошную рамку 1px вокруг элемента с фоном, выраженным в шестнадцатеричном формате?

Проблема не связана с тегом привязки, как я доказываю в скрипке, применяя тот же стиль к divs.

Answer 1

Я решил с помощью

background-clip: padding-box; 

и определение немного толще границы дна шириной