Question

我发现以下CSS指令不会调整IE9中显示的DIV背景图像的大小。你有什么主意吗？

HTML：

<DIV id=window20 class="window smallWindow">
    <STRONG>abcde</STRONG>
    <BR /><BR />
</DIV>

CSS：

.window {
    Z-INDEX: 20;
    BORDER-BOTTOM: #346789 2px dotted;
    POSITION: absolute;
    BORDER-LEFT: #346789 2px dotted;
    PADDING-BOTTOM: 0.5em;
    PADDING-LEFT: 0.5em;
    WIDTH: 14em;
    PADDING-RIGHT: 0.5em;
    FONT-FAMILY: helvetica;
    HEIGHT: 4em;
    COLOR: white;
    FONT-SIZE: 1.0em;
    BORDER-TOP: #346789 2px dotted;
    BORDER-RIGHT: #346789 2px dotted;
    PADDING-TOP: 0.5em;
    border-radius: 0.6em;
    -moz-border-radius: 0.6em
}
.smallWindow1 {
    BACKGROUND-COLOR: #558822
}
#window20 {
    TOP: 10em;
    LEFT: 8em;
    WIDTH: 8em;
    HEIGHT: 4em;
    background-image :url(../image/interface_system.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-origin: content-box;
}

Answer 1

试试这个

CSS

#window20 {
    TOP: 10em;
    LEFT: 8em;
    WIDTH: 8em;
    HEIGHT: 4em;
    background-image :url(../image/interface_system.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
}

Answer 2

IE9确实支持background-size，但您的示例中的问题是您有background-size: auto，这意味着不会延伸背景！（如果您未指定属性，则默认为。）

解决方案：根据您的需要，使用100% 100%或cover或contain。
见https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

我会做一个小提琴，但我没有你的背景图片，而且，你的例子中的div不会移动，所以它不会是非常具有说明性的。

IE9 DIV背景图片没有调整大小

2 个答案: