我的旗幟是不是在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可見

回答

相關問題