Html 苹果/iPhone上的链接无法正常工作

我的任务是使网站具有响应性。为了配合桌面版本的风格，我决定使用视差滚动。我仍然在学习很多关于网页设计的知识，但是我很小心地使用了一些可以在手机上正常工作的例子

滚动效果非常好，我遇到的问题是iPhone和Safari桌面上的链接。在iPhone上，最后一节的链接似乎总是在顶部，而在Safari桌面上，第一节的链接总是在顶部。在其他浏览器，如Chrome、Firefox和Opera中，链接可以正常工作

我尝试过一些方法，比如设置z索引，将每个部分设置为不同的视口级别，等等，但现在我被卡住了。我不确定我是应该发布所有代码还是只是其中的一部分并链接到我的代码笔。下面是包含相应css的html的一部分

<section class="hero" id="section-0">
    <figure></figure>
    <h2 class="hero__title">Tagline</h2>
    <div class='hero__container'>
        <div class='banner__brand'>
            <h1 class='banner__heading'><span>BRAND NAME </br>
                BRAND </span>&nbsp;&nbsp;of Location</h1>
        </div>
        <div class='banner__content'>
            <div class='paragraph u-center-text u-margin-bottom-large'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam aliquam sem et tortor. Nulla pellentesque dignissim enim sit amet venenatis. 
            </div>

            <div class='banner__subheading u-center-text u-margin-bottom-small'><a class='banner__link' href='https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80'>Enter Site &rarr;</a></div>
            <div class='banner__subheading u-center-text u-margin-bottom-medium'>Scroll Down &or;</div>

        </div>
    </div>
</section>

这是我的

---

我确实有一个备份计划，可以将链接区域设置为一个页面，但我更希望每个部分都有单独的链接。

如果除了Safari以外的所有浏览器都可以使用。你必须做到以下几点

改变

最重要的是您在

视口元标记中丢失了。您使用了
。但是您必须使用
。使用
shrink to fit=no
将其添加到viewport meta标记可恢复Safari 9.0之前的行为。详情请参阅

到

详情见

添加

我看到你没有使用Normalize.css。是一个小的CSS文件，在HTML元素的默认样式中提供更好的跨浏览器一致性。它是一个现代的、支持HTML5的、传统CSS重置的替代品

删除

框大小：边框框
来自
正文
。当您使用
*，*：after，*：before{box size:border box}
时，您不需要再次使用特定的框模型属性。
您能从
提供
元标记吗？@Rahul，这是元标记代码
CSS滚动显示部分
感谢您提供的信息。我应用了您建议的所有更改，但仍然存在相同的问题。在我的笔记本电脑上，Safari浏览器只能看到上一个浏览器的链接（重叠），但其他浏览器上的所有链接都可以正常工作。在iPhone上，无论使用哪种浏览器，最后一节的链接始终位于顶部。我将尝试用自己的类来指定每个部分，看看这是否有区别。再次感谢您，如果您有任何其他建议，我将不胜感激。查看我的代码，我有11个部分使用class='hero'标记，用于背景图像。最后一个使用class='content'，并使用标记作为内容的容器。我的观点是，所有带有class='hero'的部分都是class='hero'最后一部分的链接似乎与Safari中之前的所有部分重叠的部分。但是，如果我在最后一节中添加了class='content'链接，则该链接在该“页面”上可以正常工作，但不会成为所有以前页面的“重叠”链接。我希望这是有道理的。
figure {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
/* SPLASH PAGE / INTRO PAGE */
.hero:nth-child(1) figure {
  background-image: url("https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80");
  background-size: cover;
  background-position: center center;
}
/* CHRISTMAS */
.hero:nth-child(2) figure { 
    background-image: url("https://images.unsplash.com/photo-1523358962111-f4baa9f94af8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* SUMMER */
.hero:nth-child(3) figure {
    background-image: url("https://images.unsplash.com/photo-1512990414788-d97cb4a25db3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1603&q=80");
    background-size: cover;
    background-position: center center;
}
/* SCHEDULE */
.hero:nth-child(4) figure {
    background-image: url("https://images.unsplash.com/photo-1487529200833-5dcd537f115b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* PAGE 1 */
.hero:nth-child(5) figure {
    background-image: url("https://images.unsplash.com/photo-1456894332557-b03dc5cf60d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80");
    background-size: cover;
    background-position: center center;
}
.
.
.

*, 
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* border-box or content-box */
}