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

Question

我目前正在重新设计我的网站，为此，我创建了一个图像轮播，为此，我使用了下一个和上一个按钮。 在 Windows 和 Andriod 上，它们看起来很正常（下图第一张），但在 IOS 上，它们都被压扁了，看起来有点奇怪。 我能做些什么来解决这个问题吗？

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

下面是我在 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: "❯";
}