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

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

有时，当我测试按钮时，我按下上一个按钮，它会将用户带到页面底部。。。我能做些什么来解决这个问题吗？如果你想自己看看，其中一个页面的URL是

下面是我在学校下车时用于旋转木马的JS代码。我不知道如何用JS编写代码，这也是我将其从W3C中删除的原因，因此我已尽了最大努力使用它-

❮；
❯
var slideIndex=1；
showDivs（slideIndex）；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；i

我想你应该给它一个宽度和高度

width: 30px;
height: 30px

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

所以它又是我（与其他答案相同），我对你的html和css做了一些更改，所以现在它更“经得起未来考验”且更简单

HTML:

---

是的，这很有效-谢谢！我将把这个问题保留一段时间，看看是否有人能帮上一个按钮，将用户带到页面底部。但如果不是，我会把你的答案标记为正确：）我无法复制。你用的是什么浏览器和设备？我用的是Chrome，但在我的Android和iPhone上也会出现这种情况。奇怪的是，这不是所有的时间，只是一些时间。当你按“下一步”几次，然后再按“上一步”按钮时会发生这种情况。谢谢-我现在就做这些更改：）你也可以从链接中删除.html（看起来更专业），如果你还没有使用此网站，我如何从我的链接中删除.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>

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

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

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