IE在div中只显示1个背景图像div

Question

这是我的问题：

我正在尝试按照图片进行布局：

当然我更喜欢div版本，但到目前为止，我所提供的都是徒劳的。我已经提出了表和div的组合，以使其在Firefox中工作，但在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

看起来左图像和右图像不显示的原因是因为坐在table.bg和td.left内的嵌套td.right没有实际高度。我知道你已经将高度设置为100%但没有实际内容，嵌套表没有理由扩展。

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

我建议使用CSS来构建您的布局，因为您显示的不是表格数据（或似乎不是）。

多柱液体布局的一篇很棒的文章（虽然陈旧 - 仍然非常好）是马修泰勒的http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts。