css - anchor 链接有白色边框或空格

Question

我正在尝试在我的元素中制作一个带有倾斜末端的菜单和带有三 Angular 形末端的按钮。但我最终在 Firefox 和 IE 中遇到了一些空白。

我已经获取了您可以在此页面上看到的代码:

SOURCE

即

但在 chrome 中没有这样的空间，看起来还不错。

我的作品可以在这个网站上看到:

thejobupdates.com/pt/devos

请帮我删除不需要的白色间距。

我还有一个 FIDDLE在这里供大家编辑。

CSS:

     #heroTab li > a {
            text-decoration: none;
            display: block;
            position: relative;
            line-height: 52px;
            padding: 0 8px;
            color:#fff; 
            text-transform:uppercase;
            font-family:'open_sansregular', sans-serif;
            font-size:15px;
            margin-top: 10px;
            background: #243276;
        }
    #heroTab li > a:after {
        content: '';
        position: absolute;
        border: 26px solid #243276; 
        border-right-color: transparent;
        border-top-color: transparent;
        left: 100%;
        top: 0;
    }
#heroTab li > a:before {
    content: '';
    position: absolute;
    border: 26px solid #243276; 
    border-left-color: transparent;
    border-bottom-color: transparent;
    right: 100%;
    top: 0;
}

感谢您的帮助。

Answer 1

您可以将选项卡上的左/右边距更改为 -1px，例如

#heroTab li > a {
...
    margin:10px -1px;
...
}

这将弥补明显的差距。我认为这是 Angular 渲染问题，所以你必须将它们重叠 1px 才能摆脱它。参见 here .