css - 单击时按钮向顶部移动

Question

我在此链接中有一个实时站点。在特色产品类别下的主页中，您可以看到一些产品。每个产品下方都有一个名为“添加到购物车”的按钮。现在，当您单击“添加到购物车”按钮时，您可以看到该按钮会跳到顶部，我使用的是 chrome 浏览器，所以请检查一下。所以有人可以告诉我如何解决这个问题。帮助和建议将是可观的。谢谢

更新

因为我使用了 position: absolute，这用于使该行中的所有按钮对齐一行。因此，如果您提出删除它的建议，请记住我必须保持所有这些按钮对齐。

Answer 1

添加 ：

a.button:active{
    top:inherit;
}

在你的CSS结束时。

Answer 2

从position:absolute_

div#content ul.products li.product a.add_to_cart_button 来自 style.css的第 2178 行 并设置其他样式。

Answer 3

assets/css/woocommerce.css中的这条规则导致了问题。top它通过将值设置为1来拉伸处于活动状态的按钮，使其占据 100% 的高度，而它已经bottom设置为0像素。所以，删除这条规则，你应该没问题。

a.button:active, button.button:active, input.button:active, #respond input#submit:active, #content input.button:active {
    top: 1px;
}

---

编辑：

另一个肮脏的解决方案是覆盖top处于活动状态的“添加到购物车”按钮的属性。将此规则添加到您的样式表中，它也将解决您的问题

.add_to_cart_button:active{
  top:auto!important;  /*Forces the top to it's default value*/
}