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

Я пытался просто применить сплошную границу 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;; 
}

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

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

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

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

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

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

источник

2017-02-17 Luca Borrione

Это, кажется, работает очень хорошо для меня в Chrome на Windows, 10. Не могли бы вы оставить Скриншот? –

Да, нижняя граница есть, как указано в @KyleMartin. Я использую Chrome в Windows 10, но вы можете просто преобразовать hex в десятичный! Это не сложно, и до тех пор, пока вы знаете формат Red Green Blue, вы можете сделать это менее чем за 5 минут! Опять же, для этого есть калькуляторы. –

Я могу видеть нижнюю границу, попытаться добавить размер окна: border-box посмотреть, не изменилось ли это. – Seno

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

background-clip: padding-box;

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

источник

2017-02-17 10:51:29

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

ответ

Смежные вопросы