javascript - 人工制品出现在网站 : CSS issue

Question

我已经被这个难住了一点，如果可能的话，我真的很感激一些建议。所以这是有问题的网站:Imran Ahmed's Website

我遇到的问题是这些按钮:在上面的示例中，“Devpost”按钮不应该单独出现，它旁边还应该有另一个按钮“Github”(如下图所示)。

现在，虽然 div 位于正确的位置，但按钮实际上出现在屏幕顶部(作为人工制品):

这显然不是该网站的正确功能。就我尝试过的事情而言，我尝试更改相应 div (link-effect) 的 CSS 以使用 position: absolute 而不是 position: relative - 虽然这修复了人工制品，但它破坏了按钮动画(这是没有用的)。

现在，我注意到的一件事是，这似乎仅在幻灯片动画(WOW 包的一部分)完成后才会出现在 Chrome 上。如果您向下滚动到“我的元素”部分并刷新页面，您会注意到该按钮仅在动画完成时消失(这是在动画中间正确设置格式的示例):

这让我相信动画完成功能正在发生的变化导致了这个错误 - 但不幸的是我无法查明它。我尝试使用 chrome 动画工具深入研究这些变化，但我是网络开发/调试方面的新手，我无法取得太大进展。

考虑到这一点，如果您能就如何解决这些问题提出任何建议，我将不胜感激!此外，如果可以解释该错误，那就太好了-因为我想知道将来如何避免它!感谢一切!

我相信有问题的相关代码在下面，但我不确定这是否确实是问题所在!

.link-effect {
        width: 100%;
        height: 42px;
        display: inline-block;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

.link-effect a {
    margin: 0 auto;
    color: rgba(230, 126, 34, 1);
    position: relative;
    padding: 16px 7px;
    border-top: 2px solid rgba(230, 126, 34, 0);
    border-bottom: 2px solid rgba(230, 126, 34, 0);
    transition: padding .3s, border-color .3s;
    font-size: 14px;
    -webkit-transform: translate3d(0, 0, 0);
}

.link-effect a::after,
.link-effect a::before {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    max-height: 0;
    color: rgba(230, 126, 34, 0);
    content: attr(data-text);
    transition: max-height .3s, border-color 0s
}

.link-effect a:focus,
a:hover {
    padding: 5px 7px;
    border-color: rgba(230, 126, 34, 1);
    outline: 0
}

.link-effect a::before {
    top: 0;
    border-left: 2px solid rgba(230, 126, 34, 0)
}

.link-effect a::after {
    padding: 5px;
    border-right: 2px solid rgba(230, 126, 34, 0)
}

Answer 1

希望这有帮助:)

.link-effect {
    width: 100%;
    height: 42px; // remove this
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    display: flex; // add this
    justify-content: center; // add this
}

.link-effect a {
    margin: 0 5px; // change this
    color: rgba(230, 126, 34, 1);
    position: relative;
    padding: 5px 7px; // change this
    border-top: 2px solid rgba(230, 126, 34, 0);
    border-bottom: 2px solid rgba(230, 126, 34, 0);
    transition: padding .3s, border-color .3s;
    font-size: 14px;
    -webkit-transform: translate3d(0, 0, 0);
}