为什么我的下一个和上一个按钮在 IOS 上看起来很奇怪？

Question

我目前正在重新设计我的网站，为此，我创建了一个图像轮播，为此，我使用了下一个和上一个按钮。在 Windows 和 Andriod 上，它们看起来很正常（下面的第一张图片），但在 IOS 上，它们变得完全被压扁并且看起来有点奇怪。有什么办法可以解决这个问题吗？

有时当我测试按钮并按下上一个按钮时，它会将用户带到页面底部......我也可以做些什么来解决这个问题？如果您想亲自查看其中一页的 URL，则为 https://www.fredsfashionboutique.com/valentino-moon-dust-t-shirt.html

下面是我在 W3schools 下的 Carousel 中使用的 JS 代码。我不知道如何在 JS 中编码，这就是我从 W3Schools 获得它的原因，所以我已尽力使用它 - https://www.w3schools.com/howto/howto_js_slideshow.asp

                    <button class="next" onclick="plusDivs(-1)">&#10094;</button>
                    <button class="previous" onclick="plusDivs(1)">&#10095;</button>

                    
                  </div>
                  
                  <script>
                  var slideIndex = 1;
                  showDivs(slideIndex);
                  
                  function plusDivs(n) {
                    showDivs(slideIndex += n);
                  }
                  
                  function showDivs(n) {
                    var i;
                    var x = document.getElementsByClassName("mySlides");
                    if (n > x.length) {slideIndex = 1}
                    if (n < 1) {slideIndex = x.length}
                    for (i = 0; i < x.length; i++) {
                      x[i].style.display = "none";  
                    }
                    x[slideIndex-1].style.display = "block";  
                  }
                  </script>
            </div>

这是我用于上一个和下一个按钮的 CSS 代码

      .next{
        background-color: lightgray;
        color: black;
        border-radius: 50%;
        font-size: 20px;
    }
  
    .previous{
      background-color: lightgray;
      color: black;
      border-radius: 50%;
      font-size: 20px;
      }
  

这也是上一个按钮将用户带到页面底部https://vimeo.com/user24572931/review/441815395/0a41442177的屏幕记录

任何帮助将不胜感激！ 弗雷迪

Answer 1

我认为你应该给它一个宽度和高度。

width: 30px;
height: 30px

我现在无法检查，但请告诉我它是否有效。

Answer 2

所以又是我（与其他答案相同），我对您的 html 和 css 进行了一些更改，所以现在它更加“面向未来”和简单

HTML：

          <button class="next btn" onclick="plusDivs(-1)"></button>
            <button class="previous btn" onclick="plusDivs(1)"></button>

            
          </div>
          
          <script>
          var slideIndex = 1;
          showDivs(slideIndex);
          
          function plusDivs(n) {
            showDivs(slideIndex += n);
          }
          
          function showDivs(n) {
            var i;
            var x = document.getElementsByClassName("mySlides");
            if (n > x.length) {slideIndex = 1}
            if (n < 1) {slideIndex = x.length}
            for (i = 0; i < x.length; i++) {
              x[i].style.display = "none";  
            }
            x[slideIndex-1].style.display = "block";  
          }
          </script>
    </div>

CSS：

.btn{
  background-color: lightgray;
  color: black;
  border-radius: 50%;
  font-size: 20px;
  width: 30px;
  height: 30px;
}

.next:after {
  content: "❮";
}

.previous:after {
  content: "❯";
}