0

谁能解释为什么一些运行 safari 的 iphone 在图像顶部有额外的空间？

我在这里包含了一个示例项目：
https ://jsfiddle.net/3wL9m6qf/16/

<html>
<body>
  <div class='block blogBlock yellowBg'>
    <h2 class='blockTitle'> At vero eos et accusamus et iusto odio</h2>
  </div>
  <div class='blogImage'>
    <Image src="https://picsum.photos/seed/picsum/600/300"></Image>
    <a class="bold">10-2021<br></a>
    <a>At vero eos – accusamus</a>
  </div>
  
  <div class='about2'>
    <a>
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    </a>
  </div>
</body>
</html>

.blogBlock {
    padding: 30px 4% 30px 7%; 
    margin: 0;
}

.blogImage > img {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 300px;
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    object-fit: contain;
}

.blogImage {
    margin: 0;
    padding: 0;
    height: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: darkslategrey;
}

.blockText a, .blockTitle {
    color: #fff;
    margin: 0;
    padding: 0 0 14px;
    background-color: #000;
}

.yellowBg {
    background-color: #e4950c;
}

.bold {
    font-weight: 800;
}

.displayBlock {
    display: block;
}

.noTextDecoration, .noTextDecoration>a {
    text-decoration: none;
}

.about2 {
    margin-left: 7%;
    max-width: 84%;
}

@media screen and (min-width: 600px) {
  h1, h2 {
    font-size: 2rem;
}
  .link, a {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1100px) {
    .blogBlock {
        padding: 25px 4% 120px 7%; 
        margin-bottom: 20px;
    }

    .blogImage > img {
        max-height: 300px;
    }

    .blogImage {
        width: 30%;
        height: 30%;
        float: right;
        margin-right: 20px;
        position: relative;
        bottom: 190px;
    }
    .navTitle {
        font-size: 2.6rem;
    }
}

一切都按预期加载和工作，但是safari 上的一些 iPhone 在图像上方显示了一些额外的空间。（请参阅图像顶部的石板灰色背景）
出错的例子

我已经尝试在跨浏览器测试工具上运行该网站，但它们都没有显示这个问题（至少在我开始使用时）。检查的浏览器：

  • 镀铬窗户 - 没问题
  • chrome android - 没问题
  • ecosia android - 没问题
  • firefow windows - 没问题
  • safari ios 测试工具-没问题
  • 苹果手机 ？？？野生动物园 - 额外的空间

请检查我包含的 jsfiddle 以了解我如何处理图像缩放。但长话短说，我使用：

  • 图像容器 > 边距和填充 = 0；高度= 100%；
  • 图像 > 边距和填充 = 0；高度= 100%；最大高度 = 300 像素；背景尺寸：100%；背景尺寸：封面；适合对象：包含；

我试图找到有同样问题的人，但只发现了水平空间的问题。这些似乎都不适用于我的问题。

4

0 回答 0