Html 网站没有'；在Safari上不能正常工作

我为一个学校项目创建了这个网站，它可以在所有浏览器上完美运行。。。除了safari（和internet explorer，但是是的，IE…）。无论如何，我的class=“logo1”不再落后于我的class=“middentextvak1”，而它在其他浏览器上做得很好。我真的不知道该怎么办了

我不知道是否有必要添加代码，因为代码太多了

我上传了两张图片，您可以在其中看到徽标正确放置在第一张图片中：

在第二张照片中，你可以看到徽标掉到了底部： （请参阅评论，由于rep原因无法发布）

html:

---

尝试在.logo1样式上使用position:absolute而不是position:fixed。这应该是相对于中间div的位置

另外：Windows上的Safari现在已经过时了，所以你只需要在mac上担心它

如果您希望它被修复（即始终处于相同的位置），那么这一行将阻止我在Firefox和Safari中这样做-

@media only screen and (orientation:landscape){
body {  
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
 }
}

不知道你想用它做什么

---

如果徽标作为背景图像而不是内容工作，则将其设置为背景图像可能更有意义。

发生这种情况时很烦人。尝试发布一些代码示例。同时，这里有一个可能的解决方案：尝试在CSS中的

.middentextvalk1

上设置一个正z索引。通常默认值为0，但Safari可能会以不同方式处理。请阅读关闭原因。

.middentextvak1
{
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 43%;
    height: 90%;
    background: rgba(255, 255, 255, 0.5);
    margin-top: 7%;
    z-index: 10;
}

.logo1
{
    position: fixed;
    display: block;
    margin-left: 17%;
    margin-right: auto;
    width:70%;
    z-index: -1;
    opacity:0.5;
    clear: both;
}

@media only screen and (orientation:landscape){
body {  
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
 }
}