IE在div内仅显示1张背景图像div

Question

这是我的问题：

我试着把布局做得像图中那样：

​

​

当然，我更喜欢只有div的版本，但到目前为止，我的负担都是徒劳的。我想出了一个表格和div的组合，让它在火狐中工作，但在IE8 (可能是其他IE版本)中，它不能显示背景图像2和4。

有没有关于如何在IE中也这样做的想法？

PS:没有时间等待CSS3和我已经尝试了怪癖模式，背景是显示，但许多其他问题，然后沉浸。我更喜欢保持“过渡”模式。

HTML：

<table id="middletable" class="bg">
<tr><td class="left" width="*">
    <table class="bg">
        <tr><td id="leftimg">&nbsp;</td></tr>
    </table>
</td>
<td width="84">
    <div class="middle">
        CONTENT
    </div>
</td>
<td class="right" width="*">
    <table class="bg">
        <tr><td id="rightimg">&nbsp;</td></tr>
    </table>
</td></tr>
</table>

CSS：

table.bg {
width: 100%;
height: 100%;
border-collapse:collapse;
}

#middletable {
background: #fff;
}

#middletable td.left {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-left-rx.jpg') repeat-x top #ff0000;
text-align: right;
vertical-align: top;
}

#middletable td.right {
background: url('http://www.budowastrony.pl/fantom/images/site/middle-bg-right-rx.jpg') repeat-x top #ff0;
text-align: left;
vertical-align: top;
}

#leftimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-left-nr.jpg') no-repeat top right #ccc;
}
#rightimg {
height: 100%;   width: 100%;
background: url('http://www.budowastrony.pl/fantom/images/site/bg-middle-right-nr.jpg') no-repeat top left #000;
}

Answer 1

如果我理解正确的话，您希望正文和靠近它的两个图像具有固定的宽度，而两个渐变必须填充其余部分。这可能是有用的：http://jsfiddle.net/zxRf3/5/

Answer 2

看起来左图像和右图像没有显示的原因似乎是因为位于td.left和td.right中的嵌套table.bg没有实际高度。我知道您已经将高度设置为100%，但是如果没有实际内容，嵌套表就没有理由展开。

通过将height:100%分配给#middletable td.left和#middletable td.right，嵌套表现在可以达到设置的100%的高度。您可以在jsfiddle：http://jsfiddle.net/CndUR/7/中看到现在显示的图像。

我建议您考虑使用CSS构建布局，因为您显示的不是表格数据(或者看起来不是)。

Matthew Taylor的是一篇关于多列liquid布局的很好的文章(尽管很旧-仍然很好)。