html - 如何为旧版浏览器设计这个 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 的高度以反射(reflect)背景图片的尺寸。