html - 仅在 IOS 上的按钮错误

Question

我目前正在使用的网站存在我制作的 slider 问题，这让我抓狂。

在 this site 上名为“选定客户”的部分下，在任何 iOS 设备上，按钮内的箭头位置错误，并且按钮根本不起作用或效果很差。

我怀疑这是 IOS 设备的 css 支持或 css 默认值的问题，因为我在任何其他设备上都没有遇到同样的问题。它发生在 chrome 和 safari 上。在 browserstack 上通过我的免费试用进行调试后，我无法真正弄明白，而且我无力支付订阅费用。

这是我写的scss，我认为错误出在:

.slideshow-customers{
  width:100%;
  display:flex;
  flex-basis:auto;
  position:relative;
  #left-slide, #right-slide{
    margin:auto;
    top:0;
    bottom:0;
    z-index:2;
    background:white;
    border:0;
    color:#18243f;
    box-shadow: 0px 1px 5px 1px rgba(204,204,204,0.6);
    border-radius: 50%;
    line-height:1.8em;
    font-size:1.8em;
    height:1.8em;
    width:1.8em !important;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    & .fas.fa-chevron-left, & .fas.fa-chevron-right{
      margin:auto;
      box-sizing:border-box;
      color:  rgba(24,36,63,0.8);
    }
    & .fas.fa-chevron-left{
      transform:translateX(-2px) !important;
      -webkit-transform: translate3d(-2px,0,0) !important;
      -ms-transform: translateX(-2px) !important;
    }
    & .fas.fa-chevron-right{
      transform:translateX(2px) !important;
      -webkit-transform: translate3d(2px,0,0) !important;
      -ms-transform: translateX(2px) !important;
    }
  }

非常感谢任何见解!

Answer 1

iOS Safari 默认将 1em 水平填充应用于其按钮元素。由于按钮的字体大小非常大(16px 的 1.8em 等于 ~29px)，此填充会导致按钮的宽度扩展到 ~58px (29px * 2)，并将内部图标推离中心。

为了您的目的，重置填充可能足以得到您要找的东西:

.slideshow-customers {
  ...
  #left-slide, #right-slide {
    ...
    padding: 0;
  }
}