Question

在Android设备上＆＃39; Chrome浏览器以及当我在Chrome开发者工具中查看我的网站以模拟不同的设备时，我的css边框底部下方有一个薄边框（中间红色框中大白底边框线下面的非常细的红线）：

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

它来自哪里？我该如何删除它？在Chrome或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; }将其删除。

边框底部不需要的细边框

1 个答案: