如何为旧版浏览器设计这个html Box

Question

我需要设计一个具有以下结构的盒子：

我有以下html / css在ff / chrome / safari中运行良好。但IE不得不破坏乐趣。请建议我如何支持IE？

问题 背景图像未显示。

问题浏览器 IE 6,7,8,9

JS Fiddle http://jsfiddle.net/amitverma/u33aP/

<div id="canvasFrame">
            <img src="resources/images/canvasFrog.png" id="canvasFrog" alt="" />
            <img src="resources/images/canvasLeaves.png" id="canvasLeaves" alt="" />
            <div class="canvasContent">
            </div>
        </div>


#canvasFrame {
    background: url("../../resources/images/canvasTop.png"), url("../../resources/images/canvasBottom.png"), url("../../resources/images/canvasBg.png"), url("../../resources/images/canvasBgtexture.jpg");
    background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
    background-position: center top, center bottom, 0 0, 10px 0;
    width: 742px; margin-top: 40px;
    min-height: 440px; 
    position: relative; 
}

#canvasFrog { position: absolute; top:-65px; left:34px; }
#canvasLeaves { bottom: -15px; position: absolute; right: -22px;  }

Answer 1

不幸的是，我能看到你支持多个背景图片的唯一方法是在你的HTML中添加一些额外的div并稍微更改你的CSS：

HTML 的

<div id="canvasFrame">
    <img src="resources/images/canvasFrog.png" id="canvasFrog" alt="" />
    <img src="resources/images/canvasLeaves.png" id="canvasLeaves" alt="" />
    <div class="frame_top"></div>
    <div class="canvasContent">
        .... 
    </div>
    <div class="frame_bottom"></div>
</div>

CSS

#canvasFrame {
    background: url("../../resources/images/canvasBgtexture.jpg") repeat-y 10px 0;;
    .....    
}

.canvasContent{
    background: url("../../resources/images/canvasBg.png") repeat-y 0 0;
    .....  
}

.frame_top {
    background: url("../../resources/images/canvasTop.png") no-repeat left top;
    height: 100px;
    width: 100%;   
}

.frame_bottom {
    background: url("../../resources/images/canvasBottom.png") no-repeat top left;
    height: 100px;
    width: 100%;    
}

显然，您可以更改.frame_top和.frame_bottom的高度以反映背景图片的尺寸。