兼容IE6-9,FF,Chrome等主流浏览器的宽高自适应的九宫格

样式表

<style type="text/css">
.content_box{
    min-width:36px;
    min-height:33px;
    position:relative;
    overflow:hidden;
    _padding-bottom:10px;
    _overflow:visible;
}
.border_round_tl{
    width:18px;
    height:14px;
    position:absolute;
    top:0;
    left:0;
    background:url("images/border_tl.png") no-repeat scroll 0 0 transparent;
}
.border_round_tr{
    width:18px;
    height:14px;
    position:absolute;
    top:0;
    right:0;
    background:url("images/border_tr.png") no-repeat scroll 0 0 transparent;
}
.border_round_tm{
    height:14px;
    position:absolute;
    top:0;
    left:18px;
    right:18px;
    _width:100%;
    _min-height:33px;
    background:url("images/border_tm.png") repeat-x scroll 0 0 transparent;
}
.border_round_bl{
    width:18px;
    height:19px;
    position:absolute;
    bottom:0;
    left:0;
    background:url("images/border_bl.png") no-repeat scroll 0 0 transparent;
}
.border_round_bm{
    height:19px;
    position:absolute;
    bottom:0;
    left:18px;
    right:18px;
    _width:100%;
    background:url("images/border_bm.png") repeat-x scroll 0 0 transparent;
}
.border_round_br{
    width:18px;
    height:19px;
    position:absolute;
    bottom:0;
    right:0;
    background:url("images/border_br.png") no-repeat scroll 0 0 transparent;
}
.border_round_ml{
    background:url("images/border_ml.png") repeat-y scroll left top transparent;
    padding-left:18px;
    margin:-5px 0 19px;
    _margin:14px 0 13px;
}
.border_round_mr{
    background:url("images/border_mr.png") repeat-y scroll right top transparent;
    padding-right:18px;
    _width:100%;
}
.artical{
    _padding-top:14px;
    _padding-bottom:19px;
}
</style>

 

HTML层次

    <div class="content_box">
        <div class="border_round_tl"></div>
        <div class="border_round_tm"></div>
        <div class="border_round_tr"></div>
        <div class="border_round_ml">
            <div class="border_round_mr">
                <div class="artical">
                    <h3>Lorem ipsum dolor sit</h3>                       
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed sollicitudin. Nam rutrum dui enim.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>               
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed sollicitudin. Nam rutrum dui enim.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>               
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed sollicitudin. Nam rutrum dui enim.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>               
                </div>
            </div>
        </div>
        <div class="border_round_bl"></div>
        <div class="border_round_bm"></div>
        <div class="border_round_br"></div>
    </div>

说明

style里的14,19,18与背景图片的宽高有关.完整文件(本是rar压缩文件,为方便上传扩展名设为jpg,下载后请改回扩展名)