css margin-top-bottom 不工作 iPhone safari 浏览器

Question

在 iPhone Safari 浏览器上，“home-sci”类中的元素显得扭曲，而它们在 Chrome 工具栏上看起来很好。当我将项目部署到实时查看时，我在 iPhone 设备上遇到问题。如何解决这个问题并保证在不同浏览器和设备上显示一致？

iPhone 13 屏幕拍摄。 网站

HTML：

<section class="home" id="home">
        <div class="home-content">
            <h1>Hey! I'm <span>Mert Araz</span></h1>
            <div class="text-animate">
                <h3>Frontend Developer</h3>
            </div>
            <p>Tutkulu, yaratıcı ve kullanıcı odaklı çözümler sunmak için buradayım. 
                Web projelerinde estetik tasarımlar ve sürükleyici kullanıcı deneyimleri oluşturmayı hedefliyorum. 
                İşinizi dijital dünyada öne çıkarmak için size özgün ve etkileyici web çözümleri sunabilirim.</p>
                   
            <div class="btn-box">
                <a href="https://www.dostpen.com/wp-content/uploads/2023/07/Mert_Araz_CV.pdf" target="_blank" class="btn">CV İndir <i class='bx bx-down-arrow-alt'></i></a>
                <a href="https://github.com/measses?tab=repositories" target="_blank" class="btn">Projelerim  <i class='bx bx-briefcase'></i></a>
            </div>    
        </div>
        <div class="home-sci">
            <a href="mailto:[email protected]" target="_blank"><i class='bx bxl-gmail'></i></a>
            <a href="https://github.com/measses" target="_blank"><i class='bx bxl-github'></i></a>
            <a href="https://www.linkedin.com/in/muhammedmertaraz/" target="_blank"><i class='bx bxl-linkedin'></i></a>
            <a href="https://twitter.com/measssess" target="_blank"><i class='bx bxl-twitter'></i></a>
        </div>  
        <div class="home-imgHover">
        </div>
    </section>

CSS：

.home-sci a:hover{
    color: var(--bg-color);
}

.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background:var(--main-color);
    z-index: -1;
    transition: .5s;

}

media query:
/*home contact*/
  @media screen and(max-width: 430px){
    .home-sci a{
        margin-top:20px;
    }
}

Answer 1

您可以使用此网站查看属性是否在所有浏览器中支持或不支持caniuse.com