出现在网站上的人工制品：CSS问题

Question

我已经被这一点困扰了，如果可能的话，我会非常感谢一些建议。所以这是有问题的网站：Imran Ahmed's Website

我遇到的问题是使用这些按钮：在上面的例子中，＆＃39; Devpost＆＃39;按钮不应该只是自己出现，它还应该有另一个按钮＆＃39; Github＆＃39;旁边（如下图所示）。

现在，虽然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);
}