CSS背景位置在浏览器之间给出不同的结果

Question

IE似乎不知道底部是什么意思......我正在尝试将背景svg放在div的底部中心。 screen shot comparing IE and Chrome

http://codepen.io/g_am1/pen/KdrvbZ

<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;
}

Answer 1

我最终使用的是preserveAspectRatio =“xMinYMax meet”