在Android设备的Chrome浏览器上使用边框底部

Question

的不需要的薄边框以及在Chrome开发人员工具中查看我的网站以模拟不同设备时，我的css边框下方有一个薄边框（下方非常细的红线白色的大中间红色框底部边框线）：

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

哪儿它从何而来？我怎样才能删除它？在Firefox或Chrome的桌面普通视图中，此细线不可见。这是我的HTML：

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

我的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; 
} 

非常感谢！

Answer 1

尝试header nav a { background-clip: padding-box; }将其删除。