Unerwünschte dünne Umrandung

Question

auf dem Chrome-Browser von Android-Geräten und auch wenn ich meine Website in Chrome Developer Tools zum Simulieren verschiedener Geräte anschaue, gibt es einen dünnen Rand unterhalb meines CSS-Rahmens (die sehr dünne rote Linie unten) die großen weißen Boden-Rand-Linie in der Mitte roten Kasten):

a red thin line below the big white bottom-border-line in the middle red box

Wo kommt es her? Wie kann ich es entfernen? In Firefox oder auf der normalen Desktop-Ansicht in Chrome ist diese dünne Linie nicht sichtbar. Hier ist mein HTML:

<header> 
<nav> 
<a href='#'>test</a> 
<a href='#' class='selected'>test</a> 
<a href='#'>test</a> 
</nav> 
</header> 

Und mein CSS:

header { 
    width:100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

header nav { 
    display: flex; 
} 

header nav a { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    text-decoration: none; 
    border-bottom: 5px solid blue; 
    border-bottom: none; 
    background: blue; 
    color: white; 
} 

header nav a.selected { 
    background-color: red; 
    border-bottom: 5px solid white; 
} 

Vielen Dank!

Answer 1

Versuchen Sie header nav a { background-clip: padding-box; }, um es zu entfernen.