我的横幅在 Safari 5.1.7 中不可见

Question

This page 我正在开发的 Safari 布局与 Chrome/Firefox

不同

如您所见，顶部横幅未在 Safari 上显示，我认为这是因为视差 CSS 如果我没有完全错的话，我已经为横幅添加了内容。

这里是 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;，但它似乎不支持您在这里尝试使用的 shorthand 版本。

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

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

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

话虽这么说，这应该不是问题，因为使用 Safari 作为主要浏览器的人可能会使用 OS X，这意味着他们将使用更新版本的 Safari。不太可能有人会在 Windows 上使用 Safari 作为他们的主要浏览器。再一次，考虑到仍有 Opera 12 用户，这是可能的...

我的横幅在 Safari 5.1.7 中不可见

My banner is not visible in Safari 5.1.7

css

cross-browser

banner