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来构建您的布局，因为您显示的不是表格数据（或似乎不是）。

马丁·泰勒（Matthew Taylor）撰写了一篇关于多列液体布局（虽然陈旧但仍然非常好）的精彩文章 http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts 。