CSS 按钮在 Webkit 中呈现不同

Question

我在 div 内有一个宽度可变的按钮，我面临一个问题，即该按钮仅在 Safari 中以不同方式呈现。

在所有浏览器中它都呈现如下：

但在 Safari（以及所有基于 Webkit 的浏览器）中，它呈现如下：

这是组件的样式（styled-components）：

export const ArrowRight = styled(Button)`
  background-color: #0086ff !important;
  color: #ffffff !important;
  position: absolute;
  right: 0%;
  top: 43%;
  border-radius: 50% !important;
  padding: 2px !important;
  min-width: 24px;
  ${({ theme }) => theme.breakpoints?.down('md')} {
    right: 1%;
  }
  ${({ theme }) => theme.breakpoints?.down('xs')} {
    right: 3%;
  }

有人可以帮助我吗？我不知道如何解决这个问题。

Answer 1

您检查过是否有定位的祖先元素吗？

即

<div class="relative">
  <div class="absolute"></div>
</div>

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning