瀏覽器給出不同結果的CSS背景位置

IE似乎不知道底部的意思是什麼......我試圖將背景svg放在div的底部中心。 screen shot comparing IE and Chrome 瀏覽器給出不同結果的CSS背景位置

<div id="pixels"> 
    <p><code>background-position: </code></p> 
</div> 

<div id="percentages"> 
    <p><code>background-position: </code></p> 
</div> 

<div id="keywords"> 
    <p><code>background-position: </code></p> 
</div>

和

div { 
    width: 800px; 
    height: 200px; 
    border: 5px solid #E18728; 
    margin-bottom: .5em; 
    background: url(http://ridebike.ws/images/other/bikesenerey.svg); 
    background-repeat: no-repeat; 
} 

#pixels { background-position: 350px 0; } 

#percentages { background-position: 50% 100%; } 

#keywords { background-position: bottom center; } 


/* styling for Pen, unrelated to background-position */ 
p { 
    margin-top: 50px; 
    padding: 0 1em; 
}

來源

2015-11-10 Glen Martin

檢查SVG的'preserveAspectRatio'選項。聽起來像你想把它設置爲'none'？ SVG在Illustrator和PS中保存時有一些設置，即IE讀取不正確。您的定位與其他標準SVG圖像一起工作正常。 http://codepen.io/anon/pen/epQGpb –

是的！我們走在正確的軌道上，但「沒有」將svg延伸到div的頂端。我希望它出現在底部。 –

我結束了使用preserveAspectRatio = 「xMinYMax滿足」

來源

2015-12-04 19:53:32

瀏覽器給出不同結果的CSS背景位置

回答

相關問題