CSS：IE/Safari中的背景大小和位置

您好，我对IE11/Safari 5中响应CSS背景图像的行为感到有点困惑，它在Chrome和Firefox中运行良好：

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: contain;
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

问题是svg背景图像完全包含在动态缩放的div中（其宽度/高度以百分比表示），但在IE和Safari中，缩放时它总是显示在左侧而不是右侧

有解决方案吗？

您的代码：

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: contain; /* thats wrong */
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

更改：

#contentheader_logo_inner {
    background:url('images/logo.svg') right top no-repeat;
    background-size: 100% 100%; /* full size background */
    background-origin: content-box; /* this placing the background the words place (content-box) */
    display:inline-block;
    max-width:200px;
    width:100%;
    height:100%;
}

---

您好，谢谢您的提示，但是它并不能完全解决问题。您的解决方案在每个浏览器中都是恒定的，但背景图像始终居中，且不与元素的右侧对齐。注意：元素#内容(content)logo(u inner)的宽度可能大于高度，反之亦然