為什么我的下一個和上一個按鈕在 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: "❯";
}