Question

你好，我对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中，缩放时它总是显示为LEFT而不是RIGHT。

有解决方法吗？

Answer 1

您的代码：

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

CSS：背景大小包含和定位在IE / Safari中

1 个答案: