我的旗帜是不是在Safari 5.1.7可见

This page我开发了Safari上不同的布局不是Chrome/Firefox的我的旗帜是不是在Safari 5.1.7可见

正如你所看到的，顶部横幅没有在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浏览器或我缺少什么吗？

来源

2015-07-12 NohmanJ

可以在Safari 7.1.7中重现，您使用的是哪个版本？ –

我在Windows上使用Safari 5.1.7。请给我一个关于它在Safari浏览器上的外观如何的屏幕显示？谢谢！ – NohmanJ

我猜你正在使用Safari，它已经过时了。前段时间苹果放弃了它，我怀疑很多人实际上使用它。这里有一个截图：https：//i.imgur.com/Fsj8COk.jpg –

第一个问题是您正在使用该元素的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，这意味着他们将使用更新版本的Safari。任何人都不可能在Windows上使用Safari作为主浏览器。再说一次，考虑到Opera 12用户仍然有可能......

来源

2015-07-12 05:23:02 TylerH

我的旗帜是不是在Safari 5.1.7可见

回答

相关问题