Javascript 我的html图像在iphone上与导航栏重叠，但在其他设备上不重叠

上图是我测试网站时iphone上的截图^

https://gyazo.com/5879a8f4528bcfb7bc5c8b5cd3f72dd1

上面的图片来自我的chrome电脑^

代码

https://gyazo.com/5c4ac3d0cef9b63a92f2649d8e00adba

CSS3

Html代码

https://gyazo.com/5c4ac3d0cef9b63a92f2649d8e00adba

注意这是一种移动优先的方法

解决这个问题的一件事是，如果你删除了图片，但我需要图片。此外，它是不可能有它作为背景的css，因为这样的话，整个点使用把手消失

您可以通过在“主”部分放置一个“margintop:130px”来修复它，但当您在android上使用它时，“主”部分将在导航栏下方130 px

---

我真的不明白为什么会出现这个问题。

该网站本身在chrome中运行良好，但在safari中却不行，因此您可以检测特定的

导航器.userAgent

，并像这样修改元素和css

 module.exports = [
  {

        name: 'Starbucks Stureplan',
        adress: 'Kungsgatan 2',
        description: 'Very nice place with good drinks and good wifi with nice service.',
        options: {
          wifi: true,
          toilet: true
        },
//this is the image
        image: "https://s-media-cache-ak0.pinimg.com/originals/8f/5f/d0/8f5fd07d1034e0d4941c4ad9d58ec055.jpg"
      },
      {
        name: 'Starbucks Fenix',
        adress: 'Kungsgatan 2',
        description: 'Very nice place with good drinks and good wifi with nice service.',
        options: {
          wifi: true,
          toilet: true
        }
      }
    ]

我为你做了一把小提琴

---

编辑：忘记将jQuery添加到fiddle中。

我没有使用js就解决了这个问题，您必须将img标记包装到另一个div中，如下所示：

if (navigator.userAgent.indexOf("Safari") != -1 &&
navigator.userAgent.indexOf("Chrome") == -1) {
$("h1").addClass("safari");
}

{{{#如果图像}}
{{else}
{{/if}

---

这就解决了这个问题，在本例中，您将

display:inherit在css中
 我看不到iPhone图像的照片，它说我需要登录才能访问它。请把它放在别处，这样人们就不需要登录了。另外，你可以直接将图片添加到你的帖子中。啊，对不起，现在就解决了。我会按照@AnthonyMichelizzi的建议进行浏览器特定的检查。每个浏览器的渲染方式都不同，如果没有您的问题的工作示例，则很难找出问题所在。提供的代码很好，但很难在“是什么”和“如果有什么”之间建立关系，如果有其他影响的话。祝你好运！
<div class="child-img">


              {{#if image}}
                <img class="blur" src="{{image}}" />
              {{else}}
                <div class="cards-header-bg">
                </div>
              {{/if}}
</div>