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

Posted 2023-03-14

【中文标题】为啥我的下一个和上一个按钮在 IOS 上看起来很奇怪？

【英文标题】：Why do my Next and Previous Buttons look odd on IOS?为什么我的下一个和上一个按钮在 IOS 上看起来很奇怪？

【发布时间】：2020-07-26 16:17:55

【问题描述】：

我目前正在重新设计我的网站，为此，我创建了一个图像轮播，为此，我使用了下一个和上一个按钮。在 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的屏幕记录

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

【参考方案1】：

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

width: 30px;
height: 30px

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

【讨论】：

是的，这行得通 - 谢谢！我将把这个问题暂时搁置一会，看看是否有人可以帮助使用上一个按钮将用户带到页面底部。但如果不是，我会将您的答案标记为正确:)

我无法重现。您使用的是什么浏览器和设备？

我使用的是 Chrome，但它也发生在我的 android 和 iPhone 上。奇怪的是，它不是一直只有某些时候。当您按几次下一个然后尝试按上一个按钮时会发生这种情况。

【参考方案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: "❯";

【讨论】：

谢谢 - 我现在会做出这些改变 :)

如果您还没有使用此网站w3schools.com

，您也可以从链接中删除 .html（看起来更专业）

如何从我的链接中删除 .html？我一直在尝试这样做一段时间......对不起，我不太擅长这个

vimeo.com/user24572931/review/441815395/0a41442177 这是按钮问题的屏幕录制链接