Question

This page我正在开发的Safari在浏览器上的布局与Chrome / Firefox不同

正如你所看到的，顶部横幅并没有在Safari上显示，我认为这是因为我为横幅添加的视差CSS如果我在这里并不完全错误。< / p>

这是CSS：

.slide {
    position: relative;
    padding: 15vh 1%;
    min-height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}

.slide:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left:0;
    right:0;
}

.title {
    width: 50%;
    padding: 5%;
    border-radius: 5px;
    background: rgba(240,230,220, .7);
    box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}

.slide:nth-child(2n) .title {
    margin-left: 0;
    margin-right: auto;
}

.slide:nth-child(2n+1) .title {
    margin-left: auto;
    margin-right: 0;
}

.slide, .slide:before {
    background: 50% 50% / cover;  
}

#title {
    background-image: url("http://bildeopplaster.no/8Kk");
    background-attachment: fixed;  
}

.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; }
.carsonshold img { padding: 20px; display: block; border: none; }
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; }
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; }

.text-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-size: 0.85em;
    cursor: pointer;
}

有谁可以看到为什么横幅没有出现在Safari上或者我在这里缺少什么？

Answer 1

第一个问题是您正在为该元素使用vh单位。不幸的是，Safari在版本6之前不支持vh和vw单位（在版本6.1中没有前缀）。

第二个问题是您正在使用background: 50% 50% / cover;属性 - 值对。这也不是Safari 5.1.7中支持的值。您需要删除/ cover位才能在Safari 5.1.7中使用它。 Safari 5.1.7 应该支持background-size: cover;，但它似乎不支持你在这里尝试使用的速记版本。

使用这些值会或多或少地修复它：

.slide, .slide::before {
    background: 50% 50%;
}

.slide {
    padding: 15%;
    min-height: 100%;
    width: 100%;
}

据说，这应该不是问题，因为使用Safari作为主浏览器的人可能会使用OS X，这意味着他们将使用较新的版本苹果浏览器。任何人都不可能在Windows上使用Safari作为他们的主浏览器。再说一次，考虑到还有Opera 12用户，这是可能的......

我的横幅在Safari 5.1.7中不可见

1 个答案: